Jak korzystać z próbnika kolorów hex
- Kliknij dużą próbkę, aby otworzyć systemowy próbnik kolorów, albo wpisz kod hex, np.
#1E90FF, lub nazwę, np.tomato. - Skopiuj potrzebny format: HEX, RGB, HSL, HSV lub CMYK. Kliknij dowolną próbkę rozjaśnienia, przyciemnienia lub harmonii, aby skopiować jej kod hex.
- Sprawdź pola kontrastu, aby zobaczyć, czy biały lub czarny tekst na Twoim kolorze spełnia poziom WCAG AA lub AAA.
Jak działają kody kolorów hex
Kod koloru hex, np. #FF6347, składa się z trzech bajtów: czerwonego (FF = 255), zielonego (63 = 99) i niebieskiego (47 = 71). Każdy kanał przyjmuje wartości od 00 do FF, co daje 256 × 256 × 256 = 16 777 216 możliwych kolorów. Równe wartości dają odcienie szarości – #000000 to czerń, #808080 to średnia szarość, a #FFFFFF to biel – a wyższe wartości rozjaśniają kolor.
Rozjaśnienia, przyciemnienia i harmonie kolorów
Rozjaśnienie (tint) to Twój kolor zmieszany z bielą, a przyciemnienie (shade) – z czernią. Próbnik pokazuje oba warianty w krokach co 10%, co przydaje się przy stanach hover, obramowaniach i tłach dopasowanych do koloru marki.
Harmonie obracają odcień (hue) na kole barw, zachowując nasycenie i jasność:
- Dopełniające (180°) – kolor przeciwny, do mocnego kontrastu i przycisków CTA.
- Analogiczne (±30°) – sąsiedzi na kole barw, do spokojnych i spójnych palet.
- Triadyczne (±120°) – trzy równomiernie rozmieszczone kolory, do żywych, ale zrównoważonych projektów.
Kontrast kolorów a WCAG
Wytyczne Web Content Accessibility Guidelines (WCAG) wymagają współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu (poziom AA) i 7:1 dla poziomu AAA. Duży tekst – 18 pt lub 14 pt pogrubiony – wymaga 3:1 dla AA. Współczynnik porównuje luminancję względną koloru tekstu i tła i mieści się w przedziale od 1:1 (identyczne kolory) do 21:1 (czarny na białym).
Najczęściej zadawane pytania
Czym są kody kolorów hex?
Kod koloru hex opisuje kolor za pomocą sześciu cyfr szesnastkowych: dwóch dla czerwonego, dwóch dla zielonego i dwóch dla niebieskiego, np. #FF6347 (tomato). Rozumieją je CSS, HTML, narzędzia projektowe i edytory grafiki.
Ile kolorów można zapisać kodem hex?
256 × 256 × 256 = 16 777 216 kolorów. Z dodatkową parą cyfr alfa (#RRGGBBAA) każdy z nich może mieć też 256 poziomów przezroczystości.
Jakie nazwy kolorów CSS są obsługiwane?
Wszystkie 148 nazwanych kolorów z modułu CSS Color, od aliceblue do yellowgreen, łącznie z rebeccapurple. Wpisz nazwę w pole hex lub przefiltruj listę pod narzędziem i kliknij kolor, aby go wybrać.