Konwerter kolorów

HEX, RGB, HSL, HSV i CMYK, odcienie i kontrast z tekstem

Kolor w dowolnym formacie

Wpisz HEX (#abc, #aabbcc, z przezroczystością #aabbccdd), rgb(), hsl() albo cmyk(), z przecinkami lub bez.

Ten sam kolor w innych formatach

HEX
RGB
HSL
HSV
CMYK

Jaśniejsze i ciemniejsze odcienie

Kontrast z tekstem (WCAG)

Umieść to narzędzie u siebie: pobierz kod

Wpisz kolor w HEX, RGB, HSL albo CMYK lub wybierz go z próbnika, a konwerter pokaże ten sam kolor w pozostałych formatach. Każdą wartość skopiujesz jednym kliknięciem, gotową do wklejenia w CSS albo w programie graficznym.

Pod wynikiem znajdziesz dziewięć jaśniejszych i ciemniejszych odcieni tego koloru oraz kontrast z białym i czarnym tekstem. Od razu zobaczysz, czy napis na takim tle będzie czytelny.

Formaty zapisu kolorów

Każdy z tych zapisów opisuje ten sam złoty kolor. Różnią się tylko sposobem podania wartości i miejscem, w którym się ich używa.

Formaty zapisu kolorów na przykładzie koloru #D4A030
Format	Zapis	Zakres	Gdzie się go używa
HEX	`#D4A030`	00–FF na kanał	CSS, HTML, programy graficzne
RGB	`rgb(212, 160, 48)`	0–255 na kanał	CSS, ekrany, programowanie
HSL	`hsl(41, 66%, 51%)`	0–360°, 0–100%, 0–100%	CSS, budowanie palet
HSV	`41°, 77%, 83%`	0–360°, 0–100%, 0–100%	próbniki w programach graficznych
CMYK	`cmyk(0%, 25%, 77%, 17%)`	0–100% na farbę	druk

Jak zamienić HEX na RGB

Zapis HEX to trzy pary cyfr szesnastkowych: czerwony, zielony i niebieski. Cyfry od 10 do 15 zapisuje się literami od A do F. Każdą parę zamieniasz na liczbę dziesiętną, mnożąc pierwszą cyfrę przez 16 i dodając drugą. Dla #D4A030:

D4 = 13 × 16 + 4 = 212 (czerwony),
A0 = 10 × 16 + 0 = 160 (zielony),
30 = 3 × 16 + 0 = 48 (niebieski).

Wynik to rgb(212, 160, 48). Krótki zapis z trzema cyframi podwaja każdą z nich: #f0a to #ff00aa. Ósma i siódma cyfra, jeśli są, oznaczają przezroczystość. Liczby szesnastkowe przeliczysz też w kalkulatorze binarnym.

Sprawdź w konwerterze: kolor #D4A030

HSL: odcień, nasycenie i jasność

HSL opisuje kolor tak, jak myśli o nim człowiek. Pierwsza wartość to odcień, czyli miejsce na kole barw w stopniach: 0° to czerwony, 120° zielony, 240° niebieski. Druga to nasycenie: przy 0% kolor staje się szary, przy 100% jest najbardziej intensywny. Trzecia to jasność: 0% daje czerń, 100% biel, a 50% czysty kolor.

Dzięki temu w HSL łatwo zrobić wariant koloru. Zmieniasz tylko jasność, a odcień zostaje ten sam: hsl(41, 66%, 30%) to ciemniejsza wersja złota, a hsl(41, 66%, 80%) jaśniejsza. Konwerter robi to za Ciebie w pasku odcieni. Kliknięcie odcienia wczytuje go jako nowy kolor.

Sprawdź w konwerterze: ciemniejsze złoto hsl(41, 66%, 30%)

CMYK i druk

Ekran tworzy kolor ze światła: im więcej czerwonego, zielonego i niebieskiego, tym jaśniej, aż do bieli. Drukarka nakłada farby, które pochłaniają światło: cyjan, magentę, żółty i czarny. Im więcej farby, tym ciemniej. Dlatego RGB i CMYK nie przeliczają się jeden do jednego.

Konwerter liczy CMYK prostym wzorem, bez profilu kolorów konkretnej maszyny i papieru. To wystarczy, żeby zorientować się w proporcjach farb, ale nie do druku, w którym liczy się dokładny odcień. Część jaskrawych kolorów z ekranu w ogóle nie da się wydrukować i na papierze wyjdzie bardziej matowo. Przed drukiem zapytaj drukarnię o jej profil kolorów ICC albo zamów wydruk próbny.

Kontrast tekstu i tła

Wytyczne dostępności WCAG 2 mierzą kontrast jako stosunek jasności dwóch kolorów, od 1 : 1 (te same kolory) do 21 : 1 (czerń na bieli). Zwykły tekst potrzebuje co najmniej 4,5 : 1, a duży tekst, czyli od 18 punktów albo od 14 punktów pogrubiony, co najmniej 3 : 1. Wyższy poziom AAA wymaga odpowiednio 7 : 1 i 4,5 : 1.

Przykład: na złotym tle #D4A030 biały tekst ma kontrast tylko 2,37 : 1, więc jest za słabo widoczny. Czarny tekst ma 8,87 : 1 i spełnia nawet poziom AAA. Na granatowym #1E3048 jest odwrotnie: biały tekst ma 13,36 : 1, a czarny tylko 1,57 : 1. Sprawdź w konwerterze: granatowy #1E3048

Najczęściej zadawane pytania

Jak zamienić HEX na RGB?

Podziel zapis HEX na trzy pary cyfr i każdą zamień z systemu szesnastkowego na dziesiętny. #D4A030 to D4, A0 i 30, czyli 13 × 16 + 4 = 212, 10 × 16 + 0 = 160 oraz 3 × 16 + 0 = 48. Wynik: rgb(212, 160, 48).

Czym różni się HEX od RGB?

Niczym poza zapisem. Oba opisują ten sam kolor przez ilość czerwonego, zielonego i niebieskiego światła. HEX zapisuje każdą wartość dwiema cyframi szesnastkowymi, a RGB liczbą od 0 do 255. W CSS możesz używać ich zamiennie.

Kiedy używać HSL zamiast RGB?

Gdy budujesz paletę albo szukasz jaśniejszej czy ciemniejszej wersji koloru. W HSL wystarczy zmienić ostatnią wartość, czyli jasność, a odcień zostaje ten sam. W RGB trzeba by zmienić wszystkie trzy liczby naraz.

Czy CMYK z konwertera wystarczy do druku?

Nie do druku, w którym liczy się dokładny kolor. Konwerter liczy CMYK prostym wzorem, bez profilu kolorów konkretnej maszyny i papieru. Drukarnia przelicza kolory według własnego profilu ICC, dlatego wartości CMYK do projektu najlepiej uzgodnić z nią.

Jaki kontrast tekstu z tłem jest wystarczający?

Według wytycznych WCAG 2 zwykły tekst potrzebuje kontrastu co najmniej 4,5 : 1, a duży tekst 3 : 1. Wyższy poziom AAA wymaga 7 : 1 dla zwykłego tekstu. Konwerter pokazuje kontrast wybranego koloru z białym i czarnym tekstem.

Co oznaczają dwie dodatkowe cyfry w zapisie HEX?

Zapis z ośmioma cyframi, np. #D4A03080, ma na końcu przezroczystość. 00 to kolor całkowicie przezroczysty, FF nieprzezroczysty, a 80 to około połowy. Tak samo działa krótki zapis z czterema cyframi, np. #f0a8.

Podsumowanie

HEX i RGB to ten sam kolor zapisany inaczej, HSL ułatwia robienie jaśniejszych i ciemniejszych wariantów, a CMYK z konwertera to tylko przybliżenie do druku. Zanim użyjesz koloru jako tła pod tekstem, sprawdź kontrast: zwykły tekst potrzebuje co najmniej 4,5 : 1.