Color Picker Online
Wybierz kolor na kole, dopracuj go na płótnie nasycenia i jasności, a odczytaj go w każdym formacie, jakiego używa Twój projekt, od #RRGGBB po oklch(). Ten picker robi też to, co inne narzędzia pomijają: trzy geometrie koła, w tym tradycyjne malarskie koło RYB, harmonie, które same budują paletę, kanał przezroczystości oraz eksport całej palety jednym kliknięciem jako zmienne CSS, SCSS albo JSON. Wszystko liczone lokalnie w Twojej przeglądarce.
RYB czy RGB? Trzy koła kolorów zamiast jednego
Przełącznik Tryb koła zmienia rozmieszczenie odcieni na kole:
- HSV i HSL to koła cyfrowe. Odcienie leżą tak, jak miesza je światło na ekranie. Różnią się kwadratowym polem: w HSV najjaśniejszy róg to czysty odcień, HSL umieszcza czyste odcienie w połowie jasności, a biel jest powyżej.
- RYB (malarskie) rozmieszcza odcienie tak, jak uczą się ich malarze: czerwony, żółty i niebieski jako barwy podstawowe, a między nimi pomarańczowy, zielony i fioletowy (zobacz model RYB na angielskiej Wikipedii, po angielsku, bo polskiej wersji hasła nie ma). Różnicę widać głównie w harmoniach. Na kole RYB dopełnieniem czerwieni jest zieleń, a dopełnieniem błękitu pomarańcz, czyli klasyczne pary znane z plastyki. Koło cyfrowe paruje czerwień z cyjanem. Jeśli paleta “dopełniająca” ze zwykłego pickera kiedyś wyglądała nie tak, to właśnie dlatego.
Harmonie kolorów, które same budują paletę
W polu Harmonia kolorów wybierz regułę. Koło zaznaczy kolory towarzyszące, a pod nim pojawi się gotowa paleta:
- Dopełniające (komplementarne): jeden kolor przeciwległy. Najsilniejszy kontrast, dobry do pojedynczego akcentu obok głównego koloru marki.
- Rozdzielone dopełniające: dwaj sąsiedzi koloru dopełniającego. Niemal tyle samo kontrastu, dużo łatwiej to zbalansować.
- Triadyczne: trzy odcienie rozłożone równomiernie po kole. Żywe, a przy tym stabilne, gdy jeden dominuje, a pozostałe dwa stosujesz oszczędnie.
- Tetradyczne (kwadrat): cztery odcienie. Bogate zestawienia do ilustracji i wykresów, trudne do zbalansowania w interfejsie aplikacji.
- Analogiczne: najbliżsi sąsiedzi. Spokojne zestawienie do teł i przejść.
- Monochromatyczne: jeden odcień w kilku poziomach jasności. Najbezpieczniejszy wybór dla stanów przycisków (hover, active, disabled).
Całą paletę skopiujesz jednym kliknięciem w formacie, jaki wybierzesz: zwykły HEX, RGB, HSL, OKLCH, gotowe do wklejenia zmienne CSS (--color-1: …), zmienne SCSS albo JSON do kodu. Czy kolory palety zachowują kontrast też dla osób, które gorzej rozróżniają odcienie, szybko sprawdzisz na zrzucie ekranu po konwersji na odcienie szarości.
Konwersja HEX, RGB, HSL, OKLCH i CMYK: wklej cokolwiek, odczytaj wszystko
Pola wejściowe przyjmują niemal każdy zapis koloru: #f80, #ff8800, ośmiocyfrowy hex z przezroczystością, rgb() i rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 oraz nazwane kolory CSS, jak rebeccapurple. Bez względu na to, co wpiszesz, dostaniesz siedem spójnych wyników: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, każdy z własnym przyciskiem kopiowania.
Suwak Nieprzezroczystość (alfa) pod podglądem przełącza wyniki na zapisy z przezroczystością: #RRGGBBAA, rgba() i hsla(). Podgląd rysuje się na szachownicy, więc przezroczystość widać od razu.
Najbliższy token Tailwind CSS dla dowolnego koloru
Dwa znaczniki pod podglądem nazywają kolor za Ciebie: najbliższa nazwana barwa CSS (przydatna do szybkich prototypów) oraz najbliższy token Tailwind, na przykład orange-500. Dzięki temu zostajesz w swoim systemie projektowym i nie musisz wymyślać jednorazowych wartości. Kliknięcie znacznika go skopiuje.
Rozwiązuje to pytanie, które pada przy każdym przekazaniu projektu: grafik przesłał mi kod hex, która klasa Tailwind pasuje najlepiej? Dopasowanie liczone jest względem domyślnej palety Tailwind CSS 4 (zobacz dokumentację Tailwind, po angielsku), więc token od razu wkleisz do nazwy klasy.
Którego formatu koloru użyć?
| Format | Pełna nazwa | Kiedy go użyć |
|---|---|---|
| HEX | Hexadecimal | Domyślny wybór dla sieci. Krótki, wszędzie wspierany, łatwy do skopiowania. Osiem cyfr dodaje przezroczystość. |
| RGB | Red, Green, Blue | Tak myślą ekrany. Trzy kanały światła od 0 do 255. Format, którego oczekuje większość API i kodu canvas. |
| HSL | Hue, Saturation, Lightness | Do korekt na oko. “Trochę jaśniej” albo “mniej nasycony” oznacza zmianę jednej liczby. |
| HSV | Hue, Saturation, Value | Programy graficzne. Model, na którym opiera się wybór koloru w Photoshopie i GIMP-ie. |
| LCH | Lightness, Chroma, Hue | Percepcyjnie jednolity. Te same kroki liczbowe wyglądają jak te same kroki wizualne, co HSL tylko udaje. |
| OKLCH | OK Lightness, Chroma, Hue | Nowoczesny wybór dla CSS. Naprawia przesunięcia odcienia w błękitach, które trapią LCH. Wspierają go wszystkie aktualne przeglądarki, dobry do tokenów projektowych. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientacja dla druku. Przybliżona konwersja do rozmowy z drukarnią, ostateczne wartości zależą od jej profilu kolorów. |
Dlaczego OKLCH jest percepcyjnie bardziej jednolity niż starsze modele, wyjaśnia twórca przestrzeni Oklab, Björn Ottosson, w oryginalnym artykule (po angielsku). Składnię i wsparcie przeglądarek podsumowuje MDN (po angielsku). Jak działa model druku, opisuje polska Wikipedia w haśle CMYK.
Drobiazgi, które oszczędzają czas
- Historia zapisuje się sama. Ostatnie 24 kolory przetrwają odświeżenie strony. Zostają tylko w pamięci Twojej przeglądarki i nigdzie się nie wysyłają.
- Kroplomierz. W przeglądarkach z API EyeDropper (Chrome i Edge) wybierzesz kolor z dowolnego miejsca na ekranie, nawet spoza okna przeglądarki. Kolor ze zdjęcia albo pliku z logo sprawdzisz w internetowym kroplomierzu.
- Sterowanie klawiaturą. Koło oraz pole nasycenia i jasności reagują na strzałki, więc kolor dopracujesz małymi krokami.
- Gotowe kolory to popularne barwy podstawowe, gdy potrzebujesz tylko szybkiego punktu startowego.
Najczęstsze pytania
Jak przekonwertować OKLCH na HEX?
Wklej wartośćoklch() w pole OKLCH, a pozostałe wyniki, w tym HEX, przeliczą się od razu. Działa to też w drugą stronę: wpisz HEX i odczytaj odpowiadającą mu wartość oklch(). Jedno zastrzeżenie: OKLCH potrafi opisać też kolory spoza zakresu sRGB, a te są przycinane do tego, co pokaże sRGB. Bardzo nasycony oklch() nie będzie więc wyglądał tak samo jak jego wersja HEX na ekranie o szerokim gamucie.
Czy mogę używać oklch() w produkcyjnym CSS?
Tak. Wszystkie aktualne wersje Chrome, Edge, Firefoksa i Safari obsługująoklch(), który stał się popularnym zapisem dla tokenów projektowych (Tailwind CSS 4 definiuje w nim całą paletę). Dla bardzo starych przeglądarek podaj w linii przed nim wartość zapasową HEX. To narzędzie daje Ci obie wartości.