Konwerter kodów kolorów

Konwersja kodów kolorów to wyrażanie tego samego koloru w różnych systemach zapisu, takich jak HEX, RGB i HSL. Ekran tworzy kolor, mieszając podstawowe barwy światła — czerwoną, zieloną i niebieską — więc każdy kolor sprowadza się ostatecznie do natężenia trzech kanałów RGB. HEX kompresuje te wartości RGB do sześciocyfrowego ciągu szesnastkowego (#RRGGBB), natomiast HSL porządkuje je tak, jak człowiek postrzega kolor — za pomocą kąta barwy, nasycenia i jasności.

Dlaczego konwersja ma znaczenie

• Pisanie CSS — Weź kod HEX z makiety i zamień go na RGB, co ułatwia regulację przezroczystości.
• Korekta koloru — Gdy chcesz tylko nieco przyciemnić kolor, po konwersji do HSL wystarczy zmienić samą wartość L.
• Współpraca — Utrzymuj zgodność HEX-a projektanta z Figmy, zmiennych RGB programisty oraz wzorców kolorów zespołu druku.

Niezależnie od tego, w jakim formacie wprowadzisz dane, ten konwerter od razu oblicza wszystkie pozostałe formaty i pokazuje rzeczywisty kolor w podglądzie.

HEX → RGB dzieli liczbę szesnastkową na pary po dwie cyfry i odczytuje każdą jako liczbę dziesiętną.

R = parseInt(hex[0:2], 16); G i B obliczane są tak samo. Przykład: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).

RGB → HSL najpierw normalizuje każdy kanał do zakresu 0-1, a następnie wyznacza jasność.

L = (max + min) / 2
S = delta / (2 − max − min) (gdy L > 0,5)
gdzie delta = max − min. W powyższym przykładzie max=1 i min=0,2 dają L = 0,6 (60%), S = 0,8/0,8 = 100% oraz kąt barwy H ≈ 11°, co przekłada się na HSL(11°, 100%, 60%).