Jak zamienić kolor HEX na RGB lub HSL?
- 1.
Wprowadź kolor
Wybierz go próbnikiem, wpisz kod w polu głównym (np. #336699, rgb(51 102 153) albo hsl(210 50% 40%)) lub edytuj dowolne z pól formatów.
- 2.
Skopiuj zapis
Każdy format ma własne pole i przycisk kopiowania: HEX, RGB/RGBA, HSL/HSLA, HSV, CMYK i OKLCH. Suwak alfa dodaje przezroczystość.
- 3.
Sprawdź kontrast
W sekcji kontrastu wybierz kolor tła i zobacz współczynnik oraz wynik WCAG AA i AAA dla zwykłego i dużego tekstu.
- 4.
Wygeneruj odcienie
Kliknij odcień lub tint, aby użyć go jako aktualnego koloru, albo skopiuj całą rampę.
Formaty kolorów - różnice i wzory
| Format | Przykład (#336699) | Zastosowanie |
|---|---|---|
| HEX | #336699 | CSS, projektowanie, najkrótszy zapis |
| RGB | rgb(51, 102, 153) | ekrany, programowanie; rgba() dodaje alfę |
| HSL | hsl(210, 50%, 40%) | łatwa zmiana barwy, nasycenia i jasności |
| HSV/HSB | hsv(210, 67%, 60%) | próbniki w Photoshopie, Figmie |
| CMYK | cmyk(67%, 33%, 0%, 40%) | druk (przybliżenie) |
| OKLCH | oklch(50.9% 0.087 252) | nowoczesny CSS, percepcyjnie równomierna jasność |
Przeliczenie HEX → RGB to zapis składowych szesnastkowo: 33₁₆ = 51, 66₁₆ = 102, 99₁₆ = 153. Dla HSL: L = (max + min) / 2, a nasycenie S = (max − min) / (1 − |2L − 1|), gdzie max i min to największa i najmniejsza składowa RGB w skali 0-1. CMYK liczony jest wzorem K = 1 − max(R, G, B), C = (1 − R − K) / (1 − K) itd.
Kontrast WCAG - progi i przykłady
Współczynnik kontrastu to (L₁ + 0,05) / (L₂ + 0,05), gdzie L to luminancja względna jaśniejszego i ciemniejszego koloru. Przyjmuje wartości od 1:1 do 21:1 (czerń na bieli). Wytyczne WCAG 2.x wymagają:
- 4,5:1 - poziom AA dla zwykłego tekstu (poniżej 24 px, a w pogrubieniu poniżej ok. 18,66 px),
- 3:1 - AA dla dużego tekstu oraz elementów interfejsu i grafik (kryterium 1.4.11),
- 7:1 - AAA dla zwykłego tekstu, 4,5:1 - AAA dla dużego tekstu.
Przykład: szary #767676 na białym daje 4,54:1 (spełnia AA), a #777777 - 4,48:1 (nie spełnia). Zgodność z WCAG jest podstawą wymogów dostępności cyfrowej, w tym dla podmiotów publicznych w Polsce (ustawa o dostępności cyfrowej, standard WCAG 2.1 AA).
OKLCH - dlaczego warto go znać?
OKLCH to biegunowy zapis przestrzeni OKLab: L to jasność (0-100%), C - chroma (nasycenie, zwykle 0-0,4), h - barwa w stopniach. W odróżnieniu od HSL jasność OKLCH odpowiada temu, jak widzi ją człowiek, więc kolory o tym samym L wyglądają na równie jasne - ułatwia to budowanie dostępnych palet i gradientów. Zapis oklch() jest wspierany przez współczesne przeglądarki (CSS Color Level 4). Niektóre kolory OKLCH leżą poza gamą sRGB - narzędzie ostrzega o tym i pokazuje najbliższy kolor możliwy do wyświetlenia.
Najczęściej zadawane pytania
Jak zamienić HEX na RGB?
+
Czy wartości CMYK są dokładne do druku?
+
Jaki kontrast jest wymagany dla tekstu?
+
Co oznacza kanał alfa?
+
Jakie formaty mogę wpisać w polu głównym?
+
Aktualizacja: