Próbnik kolorów i konwerter kodów kolorów – Color Picker

Tak, z Color Picker możesz korzystać za darmo i bez logowania. Wszystkie przeliczenia odbywają się bezpośrednio w twojej przeglądarce: bez przesyłania danych, rejestrowania aktywności i zapytań do serwera. Jedynie adres URL strony zapisuje aktualny kolor jako ?color=, żeby można było udostępnić go linkiem lub dodać stronę do zakładek.

Kliknij kolorowe pole obok etykiety „Najbliższy kolor CSS:”, wybierz nasycenie i jasność w kwadracie, a poniżej ustaw odcień. Kod HEX znajdziesz u góry wyniku i skopiujesz go przyciskiem. Jeśli znasz już kolor w formacie RGB, HSL, HSV lub CMYK, wpisz wartość w odpowiednim polu. Aby pobrać kolor ze zdjęcia lub zrzutu ekranu, użyj Image Color Picker – to narzędzie nie odczytuje obrazów. Przejdź do Image Color Picker

Wpisz lub wklej wartość w polu RGB, na przykład 24, 232, 136 lub rgb(24, 232, 136). Pole HEX od razu pokaże #18e888, a wartości HSL, HSV i CMYK również się zaktualizują. Aby przeliczyć w drugą stronę, wpisz kod HEX z # lub bez w polu HEX. Oba zapisy opisują ten sam kolor ekranowy: HEX zapisuje trzy wartości RGB od 0 do 255 jako pary szesnastkowe od 00 do ff.

RGB opisuje kolor przez udział światła czerwonego, zielonego i niebieskiego, które miesza ekran. HSL (odcień/nasycenie/jasność) i HSV (odcień/nasycenie/wartość) to dwa różne przeliczenia tej samej wartości RGB, bardziej intuicyjne dla ludzi. HSL dobrze nadaje się do rozjaśniania lub przyciemniania koloru, a HSV — do dobierania go za pomocą palety odcienia, nasycenia i jasności. CMYK (cyjan/magenta/żółty/czarny) opisuje natomiast mieszanie tuszu lub tonera stosowane w druku, a nie światła.

Wartość CMYK jest uproszczonym, czysto matematycznym przybliżeniem bez profilu kolorów, zaokrąglonym do pełnych procentów. Pomaga ocenić kolor ekranowy pod kątem druku, ale nie zastępuje próby drukarskiej z profilem twojej drukarni. CMYK możesz wpisać na przykład jako 0%, 61%, 72%, 0% lub cmyk(0%, 61%, 72%, 0%).

Tak. Suwakiem krycia ustawisz wartość od 0 do 100 %, a wynik pokaże kolor jako rgba() i hsla() do skopiowania. Jeśli wpiszesz wartość z kanałem alfa, na przykład 4- lub 8-cyfrowy kod HEX (#rrggbbaa), rgba() albo hsla(), suwak przejmie to krycie po opuszczeniu pola. Kod HEX w wyniku pozostanie sześciocyfrowy.

W skali od 1:1 do 21:1 określa, jak wyraźnie różnią się dwa kolory, na przykład tekst i tło. Poziomy w narzędziu: AAA od 7:1, AA od 4.5:1 dla zwykłego tekstu i AA (duży tekst) od 3:1 dla dużej lub pogrubionej czcionki. Color Picker pokazuje kontrast twojego koloru względem czerni i bieli. Aby sprawdzić dowolne kolory tekstu i tła, użyj Contrast Checker. Przejdź do Contrast Checker

Obok pola z kolorem narzędzie pokazuje najbliższy nazwany kolor CSS. Oblicza w tym celu odległość euklidesową między twoim kolorem a każdym nazwanym kolorem CSS w przestrzeni RGB i wskazuje najbliższy, na przykład tomato dla #ff6347. Jeśli kolory nie są identyczne, obok nazwy pojawia się „podobny”. Możesz skopiować nazwę i użyć jej w CSS zamiast kodu HEX, ale przy oznaczeniu „podobny” będzie to tylko przybliżenie.