Skip to main content

Konwerter kolorów

Polski

Konwertuj między formatami kolorów HEX, RGB i HSL.

hex
#3b82f6
rgb
rgb(59, 130, 246)
hsl
hsl(217, 91%, 60%)
Wszystkie obliczenia wykonywane są lokalnie w przeglądarce. Dane nie są wysyłane na serwer.

Wyniki mają charakter informacyjny. Potwierdź je w innych źródłach.

HEX, RGB i HSL — ten sam kolor na trzy sposoby

Te trzy zapisy opisują identyczne kolory; różnią się tym, co ułatwiają. HEX i RGB adresują wprost kanały czerwony, zielony i niebieski. HSL oddziela odcień od nasycenia i jasności — dlatego to po niego sięga się przy budowaniu palety.

Jak to działa

  • HEX to dwie cyfry szesnastkowe na kanał: #RRGGBB, każda para od 00 do FF (0–255).
  • RGB to te same trzy liczby dziesiętnie, czasem z kanałem alfa jako rgba().
  • HSL podaje odcień w stopniach na kole barw (0–360) oraz nasycenie i jasność w procentach.
HEX → RGB:  podziel na pary, każdą czytaj w systemie 16
  #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB → HSL:  znormalizuj do 0–1, potem
  L = (max + min) / 2
  S = (max − min) / (1 − |2L − 1|)
  H = kąt zależny od tego, który kanał jest największy

Przykład z liczbami

Przeliczenie #3B82F6 — popularnego błękitu interfejsów — przez wszystkie trzy zapisy.

  1. 3B = 3×16 + 11 = 59, 82 = 8×16 + 2 = 130, F6 = 15×16 + 6 = 246
  2. rgb(59, 130, 246)
  3. normalizacja: r=0,231, g=0,510, b=0,965 → max=0,965 (niebieski), min=0,231
  4. L = (0,965 + 0,231) / 2 = 0,598 → 60%
  5. S = (0,965 − 0,231) / (1 − |2(0,598) − 1|) = 0,734 / 0,804 = 0,913 → 91%
  6. największy jest kanał niebieski, co daje H ≈ 217°

hsl(217, 91%, 60%). Żeby zbudować z tego paletę, trzymaj odcień na 217 i zmieniaj jasność — to właśnie ruch, dla którego HSL powstał, a który w HEX jest udręką.

Jak czytać wynik

  • Równa jasność w HSL nie oznacza równej jasności postrzeganej. Żółty przy 50% wygląda znacznie jaśniej niż niebieski przy 50%, bo HSL to proste przekształcenie matematyczne RGB i nic nie wie o ludzkim wzroku. Do dostępnego kontrastu licz współczynnik kontrastu WCAG, a nie porównuj wartości jasności.
  • Trzycyfrowy HEX to skrót, w którym każda cyfra jest podwajana: #3BF znaczy #33BBFF, a nie #03B0F0.
  • Zaokrąglenia się kumulują. Przejście HEX → HSL → HEX potrafi przesunąć kanał o jeden, więc trzymaj w tokenach projektowych jeden zapis jako źródło prawdy zamiast krążyć w kółko.
  • Nowsze przestrzenie barw w CSS — zwłaszcza oklch — naprawiają percepcyjny problem HSL i warto ich używać tam, gdzie pozwala wsparcie przeglądarek.

Częste pytania

Którego zapisu używać w CSS?
HSL albo oklch do wszystkiego, co generujesz systemowo, na przykład rozjaśnień i przyciemnień koloru marki, bo zmiana jednej liczby robi jedną rzecz. HEX jest w porządku do wartości stałych przekazanych przez projektanta.
Dlaczego mój kolor wygląda inaczej w innej aplikacji?
Prawie zawsze przez różnicę profilu barwnego. Ta sama trójka RGB renderuje się inaczej w sRGB i Display P3 — dlatego zrzuty tej samej strony potrafią nie zgadzać się między urządzeniami.

Źródła