Przewodnik konwersji HEX, RGB, HSL dla zespołów produktowych

Przewodnik po konwersji HEX, RGB, HSL dla zespołów produktowych

Projektanci przekazują kody HEX w Figma. Inżynierowie piszą RGB w kodzie. HSL jest tym, czego naprawdę potrzebujesz do programowej manipulacji kolorami. Oto jak trzy formaty są powiązane i kiedy używać każdego z nich.

Trzy formaty

HEX -- #FF5733

Dwie cyfry szesnastkowe na kanał: #RRGGBB. Każda para to 00-FF (0-255 w systemie dziesiętnym). Standard internetowy od lat 90. XX wieku. Kompaktowy, uniwersalnie obsługiwany, ale nieczytelny dla człowieka.

RGB -- rgb(255, 87, 51)

Trzy wartości dziesiętne, 0-255 na kanał. To, czego używa CSS rgb(). Nieco bardziej czytelny niż HEX, ale nadal trudno go mentalnie dostosować ("rozjaśnij o 20%" nie jest oczywiste w RGB).

HSL -- hsl(11, 100%, 60%)

Odcień (0-360 stopni na kole kolorów), Nasycenie (0-100%), Jasność (0-100%). Zaprojektowany dla ludzi: możesz bezpośrednio rozumować o relacjach kolorów.

Kiedy używać każdego z nich

Dlaczego HSL wygrywa dla systemów motywów

W HSL manipulacja kolorem jest arytmetyczna:

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% jasności */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% jasności */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* odbarwiony */
}

Zmień --hue na 210, a cała paleta zmieni się z pomarańczowej na niebieską. Spróbuj tego z HEX.

Rozjaśnij: zwiększ L. 60% → 80% = jaśniejszy.

Przyciemnij: zmniejsz L. 60% → 40% = ciemniejszy.

Odbarw: zmniejsz S. 100% → 40% = bardziej stonowany.

Kolor uzupełniający: dodaj 180 do H. 11 → 191.

Ściąga konwersji

HEX → RGB: Podziel na pary, przekonwertuj szesnastkowy na dziesiętny.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (uproszczone):

Nie zapamiętuj wzorów. Użyj Narzędzia do wyboru kolorów, aby natychmiast konwertować między wszystkimi trzema formatami.

Nowoczesny CSS: oklch()

CSS Color Level 4 wprowadził oklch() -- percepcyjnie jednolitą jasność. W przeciwieństwie do HSL, równe wartości L rzeczywiście wyglądają równie jasno w różnych odcieniach. Jeśli zaczynasz nowy system projektowania w 2025+, rozważ oklch() obok HSL.

Powiązane