Selektor kolorów (HEX, RGB, HSL, OKLCH)
Wybierz kolor na kwadracie nasycenia i jasności albo wpisz HEX, RGB, HSL lub OKLCH. Wszystkie formaty są zsynchronizowane, ze skalą tint/shade, eyedropperem (Chromium) i eksportem palet do CSS i JSON.
Jak wybrać i wyeksportować kolory
1. Przeciągnij po kwadracie i suwaku odcienia albo wklej wartość HEX/RGB/HSL/OKLCH.
2. Odczytaj zsynchronizowane HEX, RGB, HSL i OKLCH na pasku podsumowania.
3. Kliknij odcień albo próbkę harmonii, żeby zbadać pokrewne kolory.
4. Skopiuj wartość, link z ?hex= albo wyeksportuj zmienne CSS / JSON.
Przykłady użycia selektora
Brandowy terakota #8F665E
Picker HSV trzyma odcień, gdy ściemnisz kolor pod hover. Eksportuj --color i --shade-* jako zmienne CSS do pliku tokenów.
Analogiczna paleta dashboardu
Wybierz harmonię analogiczną, żeby dostać odcienie ±30° i ±60°. Skopiuj pasek jako custom properties do wykresów i kart.
OKLCH do równych stopni
Skala odcieni zmienia jasność OKLCH, więc stopnie wyglądają równiej niż mieszanie HEX z bielą. Użyj oklch() we współczesnym CSS.
Kiedy warto użyć tego narzędzia
• Gdy dobierasz kolory UI i potrzebujesz HEX, RGB, HSL i OKLCH naraz.
• Gdy generujesz odcienie hover/muted z jednego hue marki.
• Gdy eksportujesz małą paletę (harmonia + rampa) do zmiennych CSS.
Harmonie w paletach UI
Kolory dopełniające leżą 180° od siebie — silny kontrast, oszczędnie na CTA. Analogiczne (±30–60°) spójnie wypełniają dashboard. Triady i tetrady dają więcej różnorodności; obniż nasycenie dodatków, żeby primary nadal prowadził. Przed publikacją tekstu sprawdź pary w testerze kontrastu WCAG.
Najczęstsze pytania
HEX vs RGB vs HSL vs OKLCH?
HEX i RGB to ten sam kolor sRGB. HSL ułatwia korektę odcienia i jasności. OKLCH to przestrzeń percepcyjna: podobne kroki L wyglądają równiej, a oklch() jest poprawnym CSS.
Czy eyedropper działa w każdej przeglądarce?
API EyeDropper jest w przeglądarkach Chromium (Chrome, Edge). Gdzie indziej wpisz wartość albo użyj pickera wizualnego.
Czy mogę udostępnić kolor?
Tak. Adres aktualizuje się o ?hex=RRGGBB. Skopiuj link, żeby otworzyć ten sam kolor.
Czy kolory idą na serwer?
Nie. Konwersja, harmonie i eksport działają lokalnie w przeglądarce.