Encoders & Utilities

Konwerter kolorów i kontrast WCAG

HEX ↔ RGB ↔ HSL z paletą i kontrolą kontrastu WCAG.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

O tym narzędziu

Color Converter cross-tłumaczy kolory między formatami, których designerzy i developerzy używają codziennie: HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK, plus nazwane kolory CSS (rebeccapurple, tomato, wszystkie 147 z nich). Wpisz dowolny format, a reszta aktualizuje się natychmiast; alpha jest zachowana w formatach, które ją wspierają.

Dwa dodatki czynią to czymś więcej niż pasywnym konwerterem. Generator palet produkuje skale tonalne (50/100/.../900) i grupy harmonii (komplementarne, triadyczne, tetradyczne, split-complementary) wokół Twojego koloru bazowego — przydatne do wypełnienia design systemu. Sprawdzacz kontrastu WCAG wybiera foreground i background, oblicza stosunek kontrastu według WCAG 2.2 i mówi, czy para przechodzi AA (4,5:1 mały, 3:1 duży) i AAA (7:1 mały, 4,5:1 duży).

Kiedy używać tego narzędzia

Budowanie design systemu. Wybierz jeden kolor brandu, dostań pełną drabinę tonalną do ról primary/secondary/neutral.
Audyt dostępności. Przepuść każdą parę tekst/tło przez sprawdzacz kontrastu; poniżej 4,5:1 znaczy, że kryterium akceptacji WCAG AA zawodzi.
Migracja CSS. Konwertuj stare stałe hex do OKLCH dla nowoczesnego wide-gamut workflow.
Handoff designer-developer. Tłumacz wartości RGB Figmy na CSS hex (lub odwrotnie) bez błędów zaokrąglania.

O kontraście WCAG i OKLCH

Kontrast WCAG 2.2 używa historycznego wzoru "relative luminance" — adekwatnego w większości przypadków, ale znanego z przeszacowywania i niedoszacowywania pewnych par kolorów. APCA (algorytm planowany dla WCAG 3) poprawia to perceptualnie jednolitą metryką; pokazujemy obie liczby, byś mógł planować naprzód. OKLCH to nowa przestrzeń kolorów CSS, która jest perceptualnie jednolita — równe numeryczne kroki w L (jasność) wyglądają równo dla oka, co czyni generowanie spójnych palet znacznie łatwiejszym niż z HSL.

Najczęstsze pytania

Co to jest próg WCAG AA?

Dla normalnego tekstu: stosunek kontrastu ≥ 4,5:1 między tekstem a tłem. Dla dużego tekstu (≥ 18pt regular lub ≥ 14pt bold): stosunek ≥ 3:1. Poziom AAA jest stricter (7:1 / 4,5:1). Większość publicznych stron celuje w AA; interfejsy rządowe i medyczne coraz częściej wymagają AAA. Nasz sprawdzacz pokazuje pass/fail dla każdego progu, byś nie musiał pamiętać liczb.

Dlaczego HEX i RGB są równoważne?

To ten sam kolor zapisany inaczej. #3366FF to po prostu skrót dla "red=0x33 (51), green=0x66 (102), blue=0xFF (255)" — trzy bajty. Notacja RGB w CSS (rgb(51, 102, 255)) zapisuje te same trzy bajty dziesiętnie. HEX jest bardziej kompaktowy (7 znaków vs ~17); RGB jest czytelniejszy, gdy musisz liczyć na kanałach. Użyj tego, co pasuje do kontekstu; wynik jest identyczny.

Co to jest OKLCH i czy powinienem go używać?

OKLCH to przestrzeń kolorów CSS Color 4 zaprojektowana, by była perceptualnie jednolita — równe numeryczne skoki w L (lightness), C (chroma) lub H (hue) wyglądają równo dla oka. HSL nie jest jednolity; jasny żółty przy L=80 wygląda znacznie jaśniej niż navy przy L=80. Dla design systemów i palet tonalnych OKLCH jest dramatycznie łatwiejszy. Wsparcie przeglądarek jest świetne (Safari 16.4+, Chrome 111+, Firefox 113+).

Czy sprawdzacz kontrastu wspiera opacity?

Tak — półprzezroczyste foregroundy są kompozytowane wobec koloru tła przed obliczeniem kontrastu, co jest tym, co ludzie faktycznie widzą. rgba(0,0,0,0.6) na białym renderuje się jako ten sam kolor co #666666 na białym i traktujemy je identycznie. Jeśli komponujesz wobec złożonego tła (obraz, gradient), wybierz średni kolor tła jako referencję.