Hex, RGB, HSL i kontrast WCAG

Próbnik kolorów i kody

Wybierz dowolny kolor — natychmiast uzyskaj kody hex, RGB, HSL, CMYK. Kopiuj jednym kliknięciem. Sprawdź kontrast WCAG. Odkryj odcienie, rozjaśnienia i harmonie.

Kliknij nazwę, aby jej użyć
#
HEX #3B82F6
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)
CMYK cmyk(76%, 47%, 0%, 4%)
ZMIENNA CSS --color: #3B82F6;
Moja paleta
Brak zapisanych kolorów — kliknij "Dodaj do palety" poniżej
Odcienie i rozjaśnienia
Odcienie (ciemniejsze) — kliknij, aby użyć
Rozjaśnienia (jaśniejsze) — kliknij, aby użyć
Harmonie kolorów
Sprawdzanie kontrastu WCAG
na tle białym
Przykładowy tekst
—
na tle czarnym
Przykładowy tekst
—
Symulacja daltonizmu
Deuteranopia
Daltonizm zielony
Protanopia
Daltonizm czerwony
Tritanopia
Daltonizm niebieski

148 nazwanych kolorów CSS

Kliknij dowolny kolor, aby załadować go do próbnika. Szukaj według nazwy lub wartości hex.

Próbka Nazwa Hex RGB

Wszystkie 148 standardowych nazwanych kolorów CSS zgodnie ze specyfikacją CSS Color Level 4.

Jak działają kody kolorów

Kody hex

Kod koloru hex taki jak #FF5733 koduje kolor jako trzy dwucyfrowe liczby szesnastkowe: czerwony (FF = 255), zielony (57 = 87), niebieski (33 = 51). Hex mieści się w zakresie od #000000 (czerń) do #FFFFFF (biel). Skrót taki jak #F60 rozszerza się do #FF6600.

RGB

RGB określa intensywność czerwonego, zielonego i niebieskiego światła, każde od 0 do 255. rgb(255, 0, 0) to czysty czerwony; rgb(0, 0, 255) to czysty niebieski. Można też podać kanał alfa: rgba(255, 87, 51, 0.5) to 50% przezroczystości.

HSL

HSL (Hue, Saturation, Lightness — barwa, nasycenie, jasność) jest bardziej intuicyjny: barwa to kąt koloru (0°=czerwony, 120°=zielony, 240°=niebieski), nasycenie to intensywność koloru (0%=szary, 100%=żywy), a jasność to jasność (0%=czerń, 50%=normalna, 100%=biel). Doskonały do programowych wariacji kolorów.

CMYK

Używany w projektowaniu do druku: Cyan, Magenta, Yellow, Key (czarny). Konwersja z RGB jest przybliżona — profesjonalne przepływy pracy druku używają profili ICC dla dokładności. Wyświetlane wartości są orientacyjne; zawsze sprawdzaj u drukarni.

Przykład obliczenia

Kolor CSS tomato to #FF6347. Rozbity na składowe: R=255 (FF), G=99 (63), B=71 (47). W HSL: barwa≈9°, nasycenie=100%, jasność=64%. Kontrast WCAG na tle białym: ~3,0:1 (AA niespełnione dla małego tekstu). Na tle czarnym: ~7,0:1 (AAA spełnione). Używaj koloru tomato na ciemnych tłach dla najlepszej czytelności.

Najczęściej zadawane pytania

Co to jest kod koloru hex?

Kod koloru hex to 6-cyfrowa liczba szesnastkowa (np. #FF5733) reprezentująca kolor przez mieszanie czerwonego, zielonego i niebieskiego światła. Pierwsze dwie cyfry to czerwony, kolejne dwie to zielony, ostatnie dwie to niebieski — każdy od 00 (brak) do FF (pełne nasycenie). Krótsze 3-cyfrowe kody (#F60) to dozwolone skróty, gdzie każda cyfra się podwaja.

Jaka jest różnica między RGB a HSL?

RGB miesza wartości czerwonego, zielonego i niebieskiego światła (0–255 każdy), odpowiadając sposobowi działania ekranów. HSL opisuje Hue (kąt koloru 0–360°), Saturation (żywość 0–100%) i Lightness (jasność 0–100%), odpowiadając temu, jak ludzie postrzegają kolor. HSL ułatwia tworzenie jaśniejszych/ciemniejszych wariantów przez zmianę tylko wartości L.

Jakiego współczynnika kontrastu WCAG potrzebuję?

WCAG 2.1 AA wymaga 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (18 pt lub 14 pt pogrubiony). AAA wymaga odpowiednio 7:1 i 4,5:1. Współczynniki te dotyczą tekstu na tle. Dekoracyjne grafiki i nieaktywne elementy interfejsu są zwolnione. Użyj sprawdzania kontrastu powyżej, aby zweryfikować kombinacje kolorów.

Co to są kolory komplementarne, analogiczne i triadyczne?

Kolory komplementarne leżą naprzeciwko siebie na kole kolorów (odległe o 180°) i tworzą silny kontrast. Kolory analogiczne są sąsiednie (±30°) i tworzą harmonijne, spójne palety. Kolory triadyczne są równomiernie rozmieszczone co 120° i zapewniają żywe zrównoważenie. Wszystkie trzy typy harmonii są pokazane w sekcji "Harmonie kolorów" powyżej.

Czy pipeta działa we wszystkich przeglądarkach?

Interfejs EyeDropper API jest aktualnie obsługiwany w Chrome 95+, Edge 95+ i Opera 81+. Nie jest dostępny w Firefox ani Safari. Przycisk pipety jest automatycznie ukrywany w nieobsługiwanych przeglądarkach — główny próbnik kolorów i wszystkie formaty kodów działają we wszystkich nowoczesnych przeglądarkach.

Co to są nazwane kolory CSS?

CSS definiuje 148 nazwanych kolorów — od aliceblue do yellowgreen — których można używać bezpośrednio w CSS bez wartości hex ani rgb. Są częścią specyfikacji CSS Color Level 4 i obejmują klasyczne kolory bezpieczne dla sieci (takie jak red, blue) oraz wiele opisowych nazw (takich jak cornflowerblue, mediumaquamarine). Pełna tabela z wyszukiwarką jest dostępna powyżej.