Konwerter kolorów HEX, RGB, HSL, CMYK

Różnica leży wyłącznie w zapisie. HEX i RGB opisują ten sam kolor w przestrzeni sRGB, raz szesnastkowo, raz dziesiętnie, więc #3A7BD5 znaczy dokładnie tyle co rgb(58 123 213). Krótki HEX wygrywa w arkuszach stylów, a funkcja rgb() tam, gdzie składową się liczy albo podstawia ze zmiennej. Konwertować da się w obie strony, bo pola formatów przyjmują też ręczny wpis.

HSL opisuje kolor odcieniem (hue), nasyceniem (saturation) i jasnością (lightness). Sięgasz po niego wtedy, gdy z jednej barwy budujesz rodzinę wariantów, bo hue i saturation zostają bez zmian, a przesuwasz samą jasność. Konwersja HSL na HEX odbywa się tutaj przy każdym ruchu suwaka, więc gotowy zapis szesnastkowy masz od razu obok. RGB pozostaje wygodniejsze przy operacjach na pojedynczych kanałach, na przykład przy maskach i mieszaniu obrazów.

Pomaga zgrubnie, bo wartość lightness porządkuje barwy od najciemniejszej do najjaśniejszej i szybciej trafisz w okolice odcienia właściwego dla tekstu. Pomiaru jednak nie zastąpi, ponieważ lightness liczy się z maksimum i minimum składowych, a kontrast WCAG z jasności względnej ważonej dla oka. Żółty i niebieski o identycznej wartości L dają wobec bieli skrajnie różny wynik, dlatego każdą parę tekstu i tła przepuść przez kalkulator kontrastu.

Dla zwykłego tekstu minimum to 4,5:1, czego wymaga poziom AA wytycznych WCAG 2.2, przywołany w europejskiej dyrektywie o dostępności i w polskiej ustawie o dostępności cyfrowej. Dla tekstu od 24 pikseli albo pogrubionego od 19 pikseli wystarczy 3:1. Poziom AAA podnosi wymagania do 7:1 i w tekście czytanym długo opłaca się celować właśnie w niego.

Zapis trzyznakowy rozwija się przez podwojenie każdej cyfry, więc #abc to dokładnie #aabbcc. Wersja czteroznakowa dokłada kanał alfa w tej samej skróconej formie. Zapis ośmioznakowy podaje przezroczystość jako dwa ostatnie znaki, gdzie FF oznacza pełną nieprzezroczystość, a 80 mniej więcej połowę. Wszystkie te warianty obsługują aktualne przeglądarki, a pole wejściowe przyjmuje każdy z nich i pomija kanał alfa przy przeliczaniu składowych.

Jako punkt wyjścia tak, jako podstawa pliku drukarskiego nie. Konwersja bez profilu ICC pomija rodzaj papieru i kalibrację maszyny, a części barw ekranowych w ogóle nie da się wydrukować. Przed skierowaniem projektu do druku poproś drukarnię o profil i przelicz pliki w programie graficznym.

Bo urządzenia różnią się profilem barwnym i przestrzenią kolorów, a różnicę pogłębia jasność ekranu. Nowsze ekrany obsługują szerszą przestrzeń Display P3, starsze pozostają przy sRGB, więc ten sam zapis szesnastkowy zostanie na nich odwzorowany nieco inaczej. Dla treści internetowej punktem odniesienia pozostaje sRGB i w tej przestrzeni pracuje to narzędzie.

Sto czterdzieści osiem, licząc transparent, czyli sto czterdzieści siedem barw właściwych. Zbiór odziedziczono po wczesnych przeglądarkach, dlatego bywa niekonsekwentny, a darkgray jest jaśniejszy od gray. Zapisy grey i gray to synonimy. Pokazujemy nazwę, gdy kolor trafia w nią dokładnie, i nazwę najbliższą w pozostałych przypadkach.

Nie wysyłamy ich nigdzie. Cała konwersja kolorów wykonuje się w Twojej przeglądarce, a wartości nie trafiają na serwer. Zapamiętujemy jedynie ostatnio wybrany kolor w pamięci lokalnej przeglądarki, żeby po powrocie na stronę nie zaczynać od nowa, i to ustawienie możesz w każdej chwili usunąć razem z danymi witryny.