Konwerter kolorów
Przelicz kolor między HEX, RGB, HSL, HSV i CMYK oraz sprawdź, czy dwa kolory mają wystarczający kontrast dla czytelnego tekstu.
Działa w całości w Twojej przeglądarce
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Nazwa CSS
Sprawdzanie kontrastu
Współczynnik kontrastu –
| Zastosowanie | Wymaga | Wynik |
|---|---|---|
| Zwykły tekst, AA | 4,5:1 | |
| Zwykły tekst, AAA | 7:1 | |
| Duży tekst, AA | 3:1 | |
| Duży tekst, AAA | 4,5:1 | |
| Ikony i elementy interfejsu, AA | 3:1 |
Odczytuje HEX (3, 4, 6 lub 8 cyfr), rgb(), hsl(), hsv(), cmyk() i nazwy kolorów CSS; inną składnię kolorów CSS odczytuje przeglądarka, o ile potrafi. HSL, HSV i CMYK są pokazywane z jednym miejscem po przecinku.
Jak przeliczyć kolor
- Wpisz lub wklej kolor w dowolnym popularnym formacie, na przykład
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)lubnavy, albo wybierz go próbnikiem kolorów. - Skopiuj potrzebny format z listy. Wartości aktualizują się w trakcie pisania.
- W sekcji Sprawdzanie kontrastu podaj kolor tekstu i kolor tła, aby zobaczyć ich współczynnik kontrastu i to, czy spełniają WCAG AA i AAA.
Formaty kolorów i kontrast
HEX i RGB opisują kolor ekranowy jako ilości czerwieni, zieleni i błękitu od 0 do 255; HEX po prostu zapisuje każdą ilość jako dwie cyfry szesnastkowe, z opcjonalną trzecią parą dla krycia. HSL i HSV opisują te same kolory przez odcień (kąt na kole barw), nasycenie oraz jasność lub wartość, co ułatwia wybranie jaśniejszej lub bardziej przygaszonej wersji koloru. To różne współrzędne tych samych kolorów sRGB, więc przeliczanie między nimi jest dokładne z wyjątkiem zaokrągleń.
CMYK jest inny: opisuje farbę, a prawdziwe przeliczenie zależy od procesu druku. Pokazana wartość pochodzi z naiwnego wzoru (czerń to 1 minus najjaśniejszy kanał, a pozostałe farby uzupełniają resztę), przydatnego do prac orientacyjnych, ale niezastępującego profilu drukarskiego.
Sprawdzanie kontrastu stosuje wzór kontrastu WCAG 2, używany w audytach dostępności i narzędziach deweloperskich przeglądarek. Mierzy wyłącznie kontrast luminancji, więc nie powie ci nic o parach kolorów problematycznych przy ślepocie barw, takich jak czerwony na zielonym, a bardzo cienkie lub małe czcionki mogą wymagać większego kontrastu niż minimum.
Wskazówki
- Potrzebujesz koloru piksela ze zdjęcia lub zrzutu ekranu? Użyj narzędzia Pobierz kolor z obrazu.
- Robisz kod QR w kolorach marki? Generator kodów QR ostrzega, gdy kontrast jest zbyt niski do zeskanowania.
- Przeliczasz liczby szesnastkowe, które nie są kolorami? Wypróbuj Konwerter systemów liczbowych.
Najczęstsze pytania
Czy wartość CMYK nadaje się do druku?
Tylko w przybliżeniu. CMYK tutaj to prosty wzór przeliczający ekranowy RGB bez profilu kolorów, którego używa większość konwerterów online. Drukarnie pracują z konkretnymi farbami i papierem, opisanymi profilem ICC, więc do prac drukarskich przeliczaj kolory w programie graficznym z profilem otrzymanym od drukarni.
Jak obliczany jest współczynnik kontrastu?
Według wzoru WCAG 2: dla każdego koloru obliczana jest luminancja względna z wartości sRGB, a współczynnik to (jaśniejszy + 0,05) podzielone przez (ciemniejszy + 0,05). Mieści się w zakresie od 1:1 (brak kontrastu) do 21:1 (czerń na bieli). Aktualny tekst WCAG używa we wzorze progu 0,04045; starsze wersje podawały 0,03928, co daje ten sam wynik dla każdego koloru 8-bitowego.
Jakich współczynników wymagają AA i AAA?
Zwykły tekst wymaga 4,5:1 dla AA i 7:1 dla AAA. Duży tekst, czyli co najmniej 24 px zwykły lub około 18,7 px pogrubiony, wymaga 3:1 dla AA i 4,5:1 dla AAA. Ikony, obramowania pól i inne elementy interfejsu wymagają 3:1 (WCAG 1.4.11). Współczynnik nie jest zaokrąglany w górę: 4,49:1 nie spełnia AA dla zwykłego tekstu.
Co z kolorami przezroczystymi?
Częściowo przezroczysty kolor tekstu jest najpierw mieszany z tłem, tak jak pokazuje go ekran, i mierzony jest kolor po zmieszaniu. Częściowo przezroczyste tło jest traktowane tak, jakby leżało na bieli. Kanały są po zmieszaniu zaokrąglane do liczb całkowitych, tak jak pokazałby je wyświetlacz.
Dlaczego wartości HSL zmieniają się nieco po przeliczeniu z powrotem?
Kolory ekranowe mają 256 poziomów na kanał, więc większość wartości HSL i HSV nie trafia dokładnie w żaden z nich. Konwerter zachowuje wewnętrznie pełną precyzję i zaokrągla tylko do wyświetlenia: HEX i RGB do liczb całkowitych, HSL, HSV i CMYK do jednego miejsca po przecinku.
Czy zna nazwy kolorów CSS?
Tak, wszystkie 148 nazwanych kolorów CSS, takich jak rebeccapurple i cornflowerblue. Wpisz nazwę, aby ją przeliczyć; gdy kolor dokładnie odpowiada nazwie, nazwa też jest pokazywana. Niektóre kolory mają dwie nazwy, na przykład aqua i cyan.