Przejdź do treści

Konwerter kolorów HEX, RGB, HSL, CMYK

Zamień kolor między HEX, RGB, HSL, HSV i CMYK oraz sprawdź kontrast tekstu z tłem według WCAG (AA, AAA).

Kontrast tekstu i tła (WCAG)

Umieść to narzędzie na swojej stronie

Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

Strona demonstracyjna

Zapisy kolorów

  • HEX #RRGGBB — trzy bajty szesnastkowo: czerwony, zielony, niebieski. Skrót #F80 = #FF8800.
  • RGB — te same składowe dziesiętnie 0–255.
  • HSL — odcień (0–360°), nasycenie i jasność w procentach: wygodny do tworzenia jaśniejszych i ciemniejszych wariantów.
  • HSV/HSB — model z programów graficznych (Photoshop, GIMP).
  • CMYK — farby drukarskie. Przeliczenie z RGB jest tylko przybliżeniem; dokładny kolor do druku zależy od profilu ICC drukarni.

Kontrast według WCAG 2.1

Współczynnik kontrastu liczymy z luminancji względnej obu kolorów: (L_jaśniejszy + 0,05) / (L_ciemniejszy + 0,05). Wynik od 1:1 (brak różnicy) do 21:1 (czarne na białym). Poziom AA wymaga 4,5:1 dla zwykłego tekstu — tego wymagają przepisy o dostępności stron instytucji publicznych.

Poradniki

Programowanie i tworzenie stronKolory w CSS: HEX, RGB, HSL i OKLCH — który zapis wybraćCo oznacza #1e88e5, jak działa przezroczystość w rgba, dlaczego projektanci lubią HSL, czym jest nowy zapis OKLCH i jak zbudować spójną paletę…Programowanie i tworzenie stronKontrast kolorów na stronie — wymagania WCAG i dostępność w praktyceCo oznacza kontrast 4,5:1, kogo obowiązują wymagania dostępności (także sklepy internetowe od 2025 r.) i jak poprawić kolory, nie psując wyglądu…Programowanie i tworzenie stronSystem dwójkowy, ósemkowy i szesnastkowy — jak zamieniać liczbyJak zamienić liczbę dziesiętną na binarną i z powrotem, dlaczego programiści lubią zapis szesnastkowy i co oznacza 0xFF albo #3651E0. Krok po kroku…Programowanie i tworzenie stronJak dobrać kolory na stronę internetowąProsty schemat kolor główny, akcent i neutralne tło, kontrast i tryb ciemny bez chaosu.Programowanie i tworzenie stronCienie i głębia w projektowaniu stron — jak używać box-shadow z wyczuciemJak cienie budują hierarchię na stronie, ile poziomów „wysokości” wystarczy, dlaczego dwa cienie wyglądają lepiej niż jeden, jak zachować cienie w…Zdjęcia, grafika i obrazyKolory ze zdjęcia i palety barw — jak dobrać kolory do projektuJak wyciągnąć kolory ze zdjęcia, czym różnią się zapisy HEX, RGB i HSL, jak zbudować spójną paletę (barwy dopełniające, analogiczne, triada) i jak…

Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.