Konwerter kolorów

Wybierz kolor lub wpisz go w dowolnym formacie (HEX, RGB, HSL, OKLCH, nazwa taka jak „tomato”…), a od razu zobaczysz jego wartość we wszystkich pozostałych, gotową do wklejenia do Twojego CSS. Ustaw przezroczystość i sprawdź, czy kolor jest czytelny na bieli i na czerni.

Formaty kolorów

HEX (#RRGGBB) to najpopularniejszy format w sieci: trzy pary cyfr szesnastkowych określające ilość czerwieni, zieleni i niebieskiego, od 00 do FF. RGB wyraża to samo dziesiętnie, od 0 do 255. HSL opisuje kolor przez odcień (0-360°), nasycenie i jasność w procentach, co ułatwia tworzenie jaśniejszych lub ciemniejszych wariantów tego samego koloru.

CMYK (cyjan, magenta, żółty i czarny) to model druku. Konwersja z RGB jest przybliżona: do precyzyjnego druku potrzebny jest profil kolorów drukarni.

Przezroczystość, HWB i OKLCH

Przezroczystość podaje się czwartą wartością, kanałem alfa: #FF880080 (8-cyfrowy HEX), rgba(255, 136, 0, 0.5) albo w nowoczesnej składni rgb(255 136 0 / 50%). 0 oznacza pełną przezroczystość, a 1 (lub 100%) pełne krycie.

HWB (odcień, biel i czerń) oraz OKLCH (jasność, chroma i odcień) to formaty CSS Color 4 obsługiwane przez wszystkie aktualne przeglądarki. OKLCH jest percepcyjnie jednorodny: dwa kolory o tej samej jasności wyglądają na równie jasne, dlatego świetnie nadaje się do tworzenia palet i wariantów. HSV/HSB nie istnieje w CSS, ale używają go Photoshop, Figma i inne programy graficzne.

CSS definiuje też 148 nazw kolorów (tomato, rebeccapurple, steelblue…). Jeśli Twój kolor nie ma nazwy, pokażemy najbardziej podobną nazwę CSS.

Kontrast i dostępność

Wytyczne dostępności WCAG wymagają minimalnego kontrastu między tekstem a tłem, aby mogły go przeczytać osoby słabowidzące: 4,5:1 dla zwykłego tekstu na poziomie AA i 7:1 na poziomie AAA (3:1 i 4,5:1 dla dużego tekstu). Kontrast wynosi od 1:1 (ten sam kolor) do 21:1 (czarny na białym).