Color Picker Online
Wybierz kolor na kole, dopracuj go na płótnie nasycenia, a odczytaj go w każdym formacie, jakim mówi Twój projekt — od #RRGGBB po oklch(). Ten picker robi też to, co inne narzędzia pomijają: trzy geometrie koła, w tym malarskie koło RYB, nakładki harmonii budujące paletę za Ciebie, kanał alfa oraz eksport całej palety jednym kliknięciem jako zmienne CSS, SCSS albo JSON. Wszystko liczone lokalnie w Twojej przeglądarce.
Trzy koła, nie jedno
Selektor Tryb koła zmienia geometrię samego koła:
- HSV i HSL to koła cyfrowe — odcienie rozmieszczone tak, jak ekrany RGB mieszają światło. Różnią się zachowaniem kwadratowego płótna: w HSV najjaśniejszy róg to czysty odcień, w HSL czyste odcienie znajdują się przy 50% jasności, a biel jest powyżej.
- RYB (malarskie) rozmieszcza odcienie tak, jak uczą się ich malarze: czerwony, żółty i niebieski jako barwy podstawowe, z pomarańczowym, zielonym i fioletowym pomiędzy nimi. Jego praktyczna wartość widać w harmoniach — na kole RYB dopełnieniem czerwieni jest zieleń, a dopełnieniem błękitu pomarańcz, czyli klasyczne pary pigmentowe, podczas gdy koło cyfrowe paruje czerwień z cyjanem. Jeśli paleta „dopełniająca” ze zwykłego pickera kiedykolwiek wyglądała nie tak, to właśnie dlatego.
Harmonie, które budują paletę za Ciebie
Wybierz regułę w polu Harmonia kolorów, a koło zaznaczy kolory towarzyszące, które pojawią się jako gotowa paleta:
- Dopełniające (komplementarne) — jeden kolor przeciwległy. Najsilniejszy kontrast; użyj go jako pojedynczego akcentu na tle dominującego koloru marki.
- Rozdzielone dopełniające — dwaj sąsiedzi koloru dopełniającego. Prawie tyle samo kontrastu, dużo łatwiej to zbalansować.
- Triadyczne — trzy równomiernie rozłożone odcienie. Żywe, ale stabilne; niech jeden dominuje, a pozostałe dwa stosuj oszczędnie.
- Tetradyczne (kwadrat) — cztery odcienie. Bogate zestawienia do ilustracji i wizualizacji danych; trudne do zbalansowania w interfejsach.
- Analogiczne — najbliżsi sąsiedzi. Niskie napięcie, dobre do teł i gradientów.
- Monochromatyczne — jeden odcień w stopniowanej jasności. Najbezpieczniejszy wybór dla stanów interfejsu (hover, active, disabled).
Panel palety kopiuje cały zestaw jednym kliknięciem, w wybranym formacie: zwykły HEX, RGB, HSL, OKLCH, gotowe do wklejenia niestandardowe właściwości CSS (--color-1: …), zmienne SCSS albo JSON do przekazania kodowi.
Wklej cokolwiek, odczytaj wszystko
Pola wejściowe przyjmują praktycznie każdą notację koloru, jaką w nie wpiszesz: #f80, #ff8800, 8-cyfrowy hex z alfą, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 albo nazwy kolorów CSS, jak rebeccapurple. Bez względu na to, co wpiszesz, w odpowiedzi otrzymasz siedem zsynchronizowanych wyników: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, każdy z własnym przyciskiem kopiowania.
Dwa pomocnicze znaczniki pod podglądem nazywają kolor za Ciebie: najbliższa nazwana barwa CSS (przydatna do szybkich prototypów i do rozmawiania o kolorach) oraz najbliższy token Tailwind (np. orange-500), dzięki czemu możesz zostać w swoim systemie projektowym zamiast wymyślać jednorazowe wartości.
Przeciągnij suwak Nieprzezroczystość (alfa) pod podglądem, a wyniki przełączą się na swoje przezroczyste odpowiedniki — #RRGGBBAA, rgba(), hsla() — z podglądem pokazanym na szachownicy, dzięki czemu łatwo ocenić przezroczystość.
Którego formatu użyć?
| Format | Pełna nazwa | Kiedy go używać? |
|---|---|---|
| HEX | Szesnastkowy | Domyślny format sieci. Kompaktowy, powszechnie wspierany, łatwy do skopiowania. 8 cyfr dodaje kanał alfa. |
| RGB | Czerwony, Zielony, Niebieski | Tak myślą ekrany. Trzy kanały światła, 0–255. Format oczekiwany przez większość API i kodu canvas. |
| HSL | Odcień, Nasycenie, Jasność | Dla ludzi edytujących ręcznie. „Trochę jaśniej” albo „mniej nasycony” to zmiana jednej liczby. |
| HSV | Odcień, Nasycenie, Wartość | Oprogramowanie graficzne. Model stojący za pickerami w Photoshopie i GIMP-ie. |
| LCH | Jasność, Chromatyczność, Odcień | Percepcyjnie jednolity. Równe kroki liczbowe wyglądają jak równe kroki wizualne — to, czym HSL udaje, że jest. |
| OKLCH | OK Jasność, Chromatyczność, Odcień | Nowoczesny wybór dla CSS. Naprawia przesunięcia odcienia w błękitach, które miał LCH; wspierany we wszystkich aktualnych przeglądarkach i idealny dla systemów tokenów projektowych. |
| CMYK | Cyjan, Magenta, Żółty, Czerń | Orientacja druku. Przybliżona konwersja do rozmów z projektantami druku — ostateczne wartości zawsze pochodzą z profilu kolorów drukarni. |
Drobiazgi, które oszczędzają czas
- Historia sama się zapamiętuje. Ostatnie 24 kolory, z którymi pracowałeś, przetrwają odświeżenie strony — zapisane wyłącznie w lokalnej pamięci Twojej przeglądarki, nigdy nigdzie nie przesyłane.
- Eyedropper. W przeglądarkach obsługujących API EyeDropper (Chrome i Edge) możesz wybrać kolor z dowolnego miejsca na ekranie, nawet spoza okna przeglądarki.
- Sterowanie klawiaturą. Koło i płótno nasycenia reagują na strzałki, co umożliwia korekty co do piksela.
- Gotowe kolory obejmują popularne barwy bazowe, gdy potrzebujesz tylko szybkiego punktu startowego.
Często zadawane pytania (FAQ)
Czy oklch() jest bezpieczny do użycia w produkcyjnym CSS?
Tak. Wszystkie aktualne wersje Chrome, Edge, Firefoksa i Safari obsługująoklch(), który stał się preferowaną notacją dla tokenów projektowych (Tailwind CSS 4 definiuje w niej całą swoją paletę). Dla bardzo starych przeglądarek podaj w kolejnej linii wartość zapasową HEX — to narzędzie daje Ci obie wartości.