Jak używać
- Wpisz kolor — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — albo wybierz go za pomocą selektora kolorów.
- Skopiuj format, którego potrzebujesz, z listy.
- Ustaw kolor tła, aby sprawdzić współczynnik kontrastu i wyniki WCAG AA/AAA.
- Kliknij odcień na skali, aby go użyć.
Opis opcji
- HEX / RGB
- Kolory ekranowe jako czerwony, zielony i niebieski od 0 do 255. #rrggbbaa i rgb(… / 50%) dodają przezroczystość.
- HSL / HSV
- Odcień, nasycenie i jasność (albo wartość). Przydatne do rozjaśniania lub przyciemniania koloru ręcznie.
- OKLCH
- Perceptualna przestrzeń kolorów z CSS Color 4. Zmiana jasności zachowuje odcień i odczuwaną intensywność koloru na stałym poziomie, co czyni ją idealną do palet i ciemnych motywów.
- CMYK
- Proste przeliczenie, tylko orientacyjne. Rzeczywiste kolory druku zależą od profilu kolorów drukarki, więc zapytaj o dokładne wartości swoją drukarnię.
- Współczynnik kontrastu
- WCAG 2.2 wymaga 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (18pt lub 14pt pogrubiony) na poziomie AA; 7:1 i 4,5:1 na poziomie AAA.
Przykład
#0f766e to rgb(15 118 110), hsl(175 77% 26%) i oklch(51.1% 0.086 186.4). Na białym tle jego współczynnik kontrastu to około 5,5:1, co przechodzi WCAG AA dla wszystkich rozmiarów tekstu.
Popularne kolory we wszystkich formatach
Nazwane kolory CSS i ich wartości. CMYK jest tu prostym przeliczeniem matematycznym; do profesjonalnego druku użyj wartości CMYK z profilu kolorów swojej drukarni.
| Nazwa CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Którego formatu użyć
HEX to najkrótszy sposób zapisu koloru w CSS i narzędziach graficznych: po dwie cyfry szesnastkowe dla czerwieni, zieleni i błękitu.
RGB to te same informacje zapisane dziesiętnie, a rgb(255 0 0 / 50%) dodaje przezroczystość.
HSL opisuje odcień, nasycenie i jasność, co ułatwia tworzenie jaśniejszych lub ciemniejszych odcieni tego samego koloru przez zmianę tylko ostatniej liczby.
OKLCH to nowszy format CSS, w którym równe kroki jasności wyglądają dla oka jednakowo różnie — przydatny przy dostępnych paletach kolorów.
Najczęściej zadawane pytania
Jaki kontrast jest dobry dla tekstu?
Co najmniej 4,5:1 dla tekstu głównego (WCAG AA). Czysty czarny na białym to 21:1; popularny szary #767676 na białym to 4,54:1, tuż nad granicą.
Czemu wartość CMYK różni się od Photoshopa?
Photoshop przelicza przez profil kolorów ICC dla konkretnej maszyny drukarskiej i papieru. To narzędzie używa prostego wzoru matematycznego, który wystarcza do szacunków, ale nie do próbek przed drukiem.
Jaka jest różnica między HSL a OKLCH?
HSL to proste przekształcenie RGB, więc żółty i niebieski o tej samej jasności wyglądają na bardzo różną jasność dla oka. OKLCH jest zaprojektowany tak, by ta sama jasność wyglądała równie jasno dla oka.
Czy mogę już dziś używać OKLCH w CSS?
Tak. oklch() działa we wszystkich aktualnych głównych przeglądarkach.
Prywatność
To narzędzie działa w całości w przeglądarce. Twoje pliki i tekst są przetwarzane na Twoim urządzeniu i nigdy nie trafiają na nasze serwery.