Konwerter kolorów

HEX i RGB to dwa najpopularniejsze formaty kolorów w sieci. Kody HEX (#RRGGBB) są zwięzłe i powszechnie stosowane w CSS, podczas gdy wartości RGB (0-255 dla każdego kanału) używane są w JavaScript i narzędziach graficznych.

Nasz konwerter HEX na RGB natychmiast przelicza wartości między tymi formatami, ułatwiając pracę w różnych narzędziach i kodzie.

HSL (odcień, nasycenie, jasność) to najbardziej intuicyjny model kolorów dla projektantów. Dostosuj:

• Odcień, aby zmienić kolor
• Nasycenie, aby dostosować jego intensywność
• Jasność, aby zmienić stopień rozświetlenia

Nasz konwerter kolorów HSL ułatwia tworzenie wariantów kolorystycznych, budowanie palet oraz przeliczanie wartości HSL na HEX lub RGB w celu ich wdrożenia.

Konwersja kolorów ekranowych (RGB) na kolory druku (CMYK) wymaga ostrożności, ponieważ te dwa modele działają inaczej. RGB jest modelem addytywnym (opartym na świetle), natomiast CMYK jest modelem substraktywnym (opartym na farbie drukarskiej).

Nasz konwerter RGB na CMYK zapewnia przybliżone wartości dla druku, choć ostateczny rezultat zależy od drukarki i papieru.

Aby przekonwertować kolor HEX na RGB, rozdziel sześciocyfrowy kod (#RRGGBB) na trzy pary znaków i przekonwertuj każdą z nich z systemu szesnastkowego (base-16) na dziesiętny (base-10): R = 16 × d1 + d2, i analogicznie dla zieleni oraz niebieskiego.

Na przykład kod #FF5733 daje FF = 255, 57 = 87, 33 = 51, czyli rgb(255, 87, 51). Obie notacje opisują tę samą przestrzeń barw sRGB zdefiniowaną w normie IEC 61966-2-1 i określoną w specyfikacji W3C CSS Color.

Każdy kanał przyjmuje wartości 0–255 (8 bitów), co daje 256³ = 16 777 216 możliwych kolorów. Skrócony zapis HEX (#F53) po prostu powiela każdą cyfrę, tworząc parę.

Konwersja RGB na HSL i HSV zaczyna się od tego samego kroku: normalizacji każdego kanału do zakresu 0–1 (podział przez 255), a następnie wyznaczenia wartości max i min. Odcień (Hue) jest identyczny w obu modelach i wynika z tego, który kanał ma najwyższą wartość.

W HSL jasność Lightness = (max + min) / 2; w HSV wartość Value = max. Nasycenie (Saturation) oblicza się inaczej: HSL dzieli chromę przez 1 − |2L − 1|, natomiast HSV dzieli chromę przez max.

Modele HSL i HSV to cylindryczne przekształcenia sześcianu RGB, standaryzowane w specyfikacji W3C CSS Color Module. Projektanci preferują je, ponieważ odcień, nasycenie i jasność odpowiadają naturalnemu sposobowi, w jaki ludzie opisują kolory.

Kod koloru HEX to szesnastkowy zapis wartości kanałów RGB, poprzedzony znakiem #.

• Najpopularniejszy, sześcioznakowy format (#RRGGBB) koduje kolor czerwony, zielony i niebieski za pomocą dwóch cyfr szesnastkowych dla każdego kanału.
• Trójznakowy skrót (#RGB) podwaja każdy znak do pary, więc #F53 odpowiada #FF5533.
• Format ośmioznakowy (#RRGGBBAA) oraz czteroznakowy dodają kanał alfa (przezroczystość), zgodnie ze specyfikacją W3C CSS Color Module Level 4.

Układ szesnastkowy opiera się na bazie 16, wykorzystując cyfry 0–9 oraz litery A–F, gdzie A = 10, a F = 15. Ta zwięzła notacja sprawia, że HEX dominuje w kodzie CSS oraz próbnikach kolorów w programach graficznych.

Większość wartości HEX i RGB stosowanych w sieci korzysta z sRGB – standardowej przestrzeni barw zdefiniowanej w normie IEC 61966-2-1 i domyślnie przyjmowanej przez CSS, jeśli nie określono innej. Przestrzeń sRGB obejmuje tylko wycinek kolorów widzialnych dla ludzkiego oka, dlatego dla nowoczesnych ekranów opracowano przestrzenie o szerszym gamucie, takie jak Display P3 czy Rec. 2020.

Specyfikacja W3C CSS Color Module Level 4 wprowadza funkcje takie jak color() i oklch(), aby obsłużyć te gamuty. Ten konwerter działa w przestrzeni sRGB, która pozostaje najbezpieczniejszym i najbardziej kompatybilnym standardem w codziennej pracy nad stronami oraz interfejsami (UI) na różnych przeglądarkach i urządzeniach.

Konwertery kolorów przeliczają barwę między różnymi formatami, dzięki czemu można z niej korzystać w dowolnym środowisku.

• Web developerzy konwertują HEX na RGB lub RGBA, aby ustawić przezroczystość w CSS.
• Projektanci UI wykorzystują HSL do tworzenia jaśniejszych i ciemniejszych odcieni koloru marki, modyfikując jedynie parametr jasności (Lightness).
• Zespoły DTP i poligraficzne przekształcają RGB na CMYK przed drukiem, ponieważ farba drukarska działa w modelu subtraktywnym.
• Narzędzia do wizualizacji danych i dostępności (accessibility) używają tych wartości do weryfikacji współczynnika kontrastu pod kątem wytycznych WCAG od W3C.

Konwerter eliminuje konieczność ręcznych obliczeń w systemie szesnastkowym i zapewnia spójność koloru między kodem, plikami projektowymi a drukiem.

Specyfikacja CSS definiuje 148 nazwanych kolorów, takich jak tomato (#FF6347), dodgerblue (#1E90FF) czy rebeccapurple (#663399) – każdy z nich jest bezpośrednim aliasem dla konkretnej wartości HEX w sRGB. Nazwy te są zestandaryzowane w specyfikacji W3C CSS Color Module i obsługiwane przez wszystkie nowoczesne przeglądarki.

Są one wygodne podczas prototypowania, lecz stanowią jedynie drobny ułamek spośród 16,7 miliona kolorów dostępnych w formatach HEX i RGB.

Ponieważ nazwany kolor odpowiada stałemu kodowi HEX, konwertery mogą wskazać najbliższy nazwany kolor dla dowolnej wartości wejściowej. Słowa kluczowe kolorów w CSS nie rozróżniają wielkości liter, dlatego 'DodgerBlue' i 'dodgerblue' wyświetlają się identycznie.

Unikaj tych częstych błędów przy konwersji kolorów:

• Najczęstszym błędem jest pominięcie prefiksu # lub nieprawidłowy podział par znaków HEX, co zniekształca wynikowy format RGB.
• Kolejnym jest traktowanie HSL i HSV jako tożsamych: ich trzeci parametr (Lightness a Value) różni się, dlatego 50% jasności (Lightness) to nie to samo co 50% wartości (Value).
• Oczekiwanie, że konwersja RGB na CMYK będzie w 100% dokładna, prowadzi do przykrych niespodzianek w druku – odwzorowanie CMYK zależy od drukarki, farby i papieru, a wzory matematyczne stanowią jedynie przybliżenie według standardów sRGB i profili drukarskich.
• Zbyt wczesne zaokrąglanie wartości podczas konwersji przez HSL i z powrotem może spowodować przekłamanie koloru.
• Zapomnienie o kanale alfa skutkuje utratą przezroczystości podczas przechodzenia między RGB a RGBA lub #RRGGBBAA.

Każdy format koloru sprawdza się w innych zastosowaniach.

• HEX (#RRGGBB) jest najbardziej zwięzły i stanowi domyślny wybór w kodzie CSS oraz przekazywaniu projektów programistom.
• RGB (0–255 na kanał) jest najłatwiejszy do odczytu i manipulacji w JavaScript oraz odzwierciedla addytywne emitowanie światła przez ekrany.
• HSL (Hue, Saturation, Lightness) najlepiej nadaje się do budowania palet i intuicyjnego dobierania odcieni.
• CMYK (Cyan, Magenta, Yellow, Key) jest przeznaczony do druku, gdzie kolor tworzy się subtraktywnie przez nałożenie farb na papier.

Wszystkie formaty ekranowe korzystają ze wspólnej przestrzeni sRGB zdefiniowanej w normie IEC 61966-2-1 i specyfikacji W3C CSS Color Module, dlatego HEX, RGB i HSL są w pełni wymienne; jedynie CMYK wymaga przybliżonej konwersji zależnej od urządzenia.