Próbnik kolorów
Znajdź dokładny kod dowolnego koloru, w każdym formacie.
Sprawdzenie kontrastu
- AA
- AA (duży tekst)
- AAA
- AA
- AA (duży tekst)
- AAA
Działa w przeglądarce. Nic, co wpiszesz, nie jest nigdzie wysyłane.
- 5 formatów koloru
- Sprawdzanie kontrastu WCAG
- Obsługa krycia
Jak wybrać kolor
- Przeciągaj w kwadracie, aby ustawić nasycenie i jasność, a potem przesuń suwak odcienia.
- Albo wpisz kod w dowolnym formacie: HEX, RGB, HSL, HSV albo CMYK.
- Skopiuj potrzebny kod i sprawdź jego kontrast poniżej.
Porównanie formatów koloru
Każdy wiersz poniżej opisuje ten sam pomarańczowy kolor. Zmienia się tylko zapis.
| Format | Przykład | Używany w |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, narzędziach graficznych |
| RGB | rgb(240, 138, 60) | CSS, edytorach obrazów |
| HSL | hsl(24, 84%, 59%) | CSS, najłatwiej dostroić na oko |
| HSV/HSB | hsv(24, 75%, 94%) | Próbnikach w aplikacjach graficznych |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Projektowaniu do druku i mieszaniu farb |
Użyj HEX albo RGB do sieci, HSL, gdy chcesz delikatnie zmienić jasność albo nasycenie koloru bez zmiany odcienia, i CMYK jako punktu wyjścia do druku.
Poziomy kontrastu WCAG
Sprawdzenie kontrastu poniżej porównuje twój kolor z pełną bielą i czernią i ocenia oba względem poziomów WCAG 2.
| Poziom | Zwykły tekst | Duży tekst |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Duży tekst oznacza około 24 px, albo 19 px pogrubione. Większość stron musi spełniać tylko poziom AA. AAA to bardziej rygorystyczna poprzeczka, używana głównie na stronach rządowych i mocno nastawionych na dostępność.
Wskazówki do wybierania dostępnych kolorów
- Zostaw odcień bez zmian i obniż jasność w HSL, aby uzyskać ciemniejszy odcień tego samego koloru na stany hover i active.
- Kolor, który spełnia AA na białym tle, może nie spełniać go na tle z odcieniem, więc sprawdzaj kontrast względem prawdziwego tła strony, a nie tylko bieli czy czerni.
- Kroplomierz działa tylko w Chrome i Edge na komputerze. Firefox i Safari jeszcze nie dodały API EyeDropper.
- Zrób próbny wydruk w drukarni, zanim zaufasz wartości CMYK przy pełnym nakładzie. Te same liczby mogą wyglądać inaczej na papierze powlekanym i niepowlekanym.
Próbnik kolorów: najczęstsze pytania
Jak uzyskać kod koloru czegoś na moim ekranie?
W Chrome i Edge na komputerze kliknij Pobierz z ekranu, a potem kliknij dowolne miejsce na ekranie. Inne przeglądarki jeszcze tego nie oferują, więc zrób zrzut ekranu i otwórz go w próbniku kolorów dla obrazów.
Jaka jest różnica między HEX, RGB i HSL?
Opisują ten sam kolor na różne sposoby. HEX i RGB podają ilości czerwonego, zielonego i niebieskiego (HEX zapisuje je w systemie szesnastkowym), a HSL podaje odcień, nasycenie i jasność, co łatwiej ręcznie dostroić.
Jaki współczynnik kontrastu potrzebny jest do czytelnego tekstu?
Poziom WCAG AA wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, czyli około 24 px, albo 19 px pogrubione. Poziom AAA podnosi wymóg dla zwykłego tekstu do 7:1.
Czy wartości CMYK są dokładne?
To bezpośrednie przeliczenie matematyczne z RGB. Prawdziwe kolory druku zależą od farb, papieru i profilu drukarki, więc traktuj je jako punkt wyjścia i sprawdź próbny wydruk.
Co zmienia suwak krycia?
Ustawia przezroczystość od 0 (niewidoczny) do 100 (pełny). Poniżej 100 kod HEX otrzymuje dwie dodatkowe cyfry, a RGB zmienia się w rgba(). Kontrast jest sprawdzany dla koloru tak, jak wygląda na każdym tle.
Do czego przydaje się HSV, czego nie daje RGB?
HSV oddziela odcień koloru od tego, jak jasny i nasycony się wydaje, dlatego próbniki farb i edytory zdjęć dają jeden suwak na odcień, a drugi na jasność, zamiast mieszać czerwony, zielony i niebieski na oko.
Czy mogę tu uzyskać kolor Pantone?
Nie. Pantone to licencjonowany system kolorów dodatkowych powiązany z konkretnymi farbami, a nie zwykłe przeliczenie matematyczne z RGB albo CMYK. Użyj wartości CMYK jako punktu wyjścia i potwierdź dokładne dopasowanie w drukarni.