Kody kolorów HEX i RGB
Wpisz kolor albo wybierz go z próbnika, a zobaczysz jego kod w HEX, RGB, HSL i CMYK, odcienie, pasujące kolory i kontrast z tłem.
- HEX
- RGB
- HSL
- CMYK
Odcienie od jasnego do ciemnego
Kolor dopełniający
Kolory analogiczne
Triada
Dopełniające rozszczepione
Test kontrastu WCAG
0
Przykładowy nagłówek
Tak wygląda zwykły tekst w tym kolorze na wybranym tle.
- Zwykły tekst
- Duży tekst, od 24 px albo 19 px pogrubiony
- Przyciski, ikony, ramki pól
AA to minimum, którego wymagamy na stronach klientów: 4,5:1 dla tekstu i 3:1 dla dużego tekstu oraz elementów.
HEX, RGB, HSL i CMYK: czym się różnią
- HEX, na przykład #157a45, to zapis używany w CSS i większości programów graficznych. Pary znaków po krzyżyku to ilość czerwonego, zielonego i niebieskiego.
- RGB, na przykład rgb(21, 122, 69), zapisuje te same trzy składowe liczbami od 0 do 255.
- HSL opisuje barwę, nasycenie i jasność, więc łatwo w nim zrobić jaśniejszą albo ciemniejszą wersję koloru.
- CMYK to kolory farb drukarskich. Przeliczenie z RGB jest orientacyjne: dokładny kolor do druku ustala drukarnia na podstawie profilu kolorów.
Kontrast tekstu z tłem
Wytyczne WCAG 2.1 wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu oraz elementów interfejsu, takich jak ramki pól i ikony. To poziom AA. Poziom AAA to 7:1 dla zwykłego tekstu.
Od 28 czerwca 2025 r. wymagania dostępności obejmują w Polsce także wiele firm, między innymi sklepy internetowe, na mocy ustawy o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze. Mikroprzedsiębiorstwa świadczące usługi są z nich zwolnione.
Na stronach, które robimy, mierzymy kontrast każdego tekstu, zanim strona trafi do klienta.
Jak dobrać paletę kolorów firmy
- Wybierz jeden kolor główny, zwykle z logo.
- Dodaj kolor do przycisków, który mocno odcina się od tła. Kolor dopełniający to dobry punkt wyjścia.
- Tekst trzymaj ciemny na jasnym tle albo jasny na ciemnym i zawsze sprawdź kontrast.
- Jaśniejsze odcienie koloru głównego nadają się na tła sekcji, ciemniejsze na nagłówki.
Najczęstsze pytania
Jak zamienić HEX na RGB?
Podziel kod na trzy pary znaków i zamień każdą z systemu szesnastkowego na dziesiętny. #157a45 to 15, 7a i 45, czyli rgb(21, 122, 69). Narzędzie robi to od razu po wpisaniu kodu.
Jak sprawdzić kolor na stronie albo zdjęciu?
W Chrome i Edge kliknij Pobierz kolor z ekranu i wskaż dowolne miejsce. W innych przeglądarkach użyj próbnika obok pola koloru albo pipety w programie graficznym.
Jaki kontrast jest wymagany?
Na poziomie AA 4,5:1 dla zwykłego tekstu oraz 3:1 dla tekstu od 24 px albo od 19 px pogrubionego i dla przycisków, ikon i ramek pól.
Czy kolor z ekranu wyjdzie tak samo w druku?
Nie zawsze. Ekran świeci, a farba odbija światło, dlatego intensywne kolory RGB wychodzą w druku bledsze. Przed dużym nakładem poproś drukarnię o wydruk próbny.
Aktualizacja: październik 2026
Inne darmowe narzędzia
- Kalkulator ceny strony i sklepuWidełki cenowe strony, sklepu albo landingu, razem z opieką, SEO i reklamami.Strony
- Test szybkości stronyWynik Google PageSpeed na telefonie i komputerze z listą rzeczy do poprawy.SEO
- Licznik znaków i podgląd w GoogleZnaki ze spacjami i bez, słowa, strony, a do tego podgląd tytułu i opisu w wynikach Google.Teksty i SEO
- Licznik słówLiczba słów, czas czytania i najczęstsze słowa oraz frazy w tekście.Teksty i SEO
- Zmiana wielkości literWielkie, małe, jak w zdaniu albo bez polskich znaków jednym kliknięciem.Teksty
Kolory dobrane, a strona dalej nie wygląda profesjonalnie?
Projektujemy strony pod konkretną branżę, z mierzonym kontrastem i wersją na telefon, od 1290 zł. Zacznij od bezpłatnego audytu Twojej obecnej strony.
