Generator kolorów

Wylosuj kolor, skopiuj jego kod i zbuduj z niego paletę. Ten generator kolorów pokazuje wartości HEX, RGB, HSL i CMYK, zwraca gotowy kod CSS i sprawdza kontrast z tekstem.

#0070F3

Przykładowy tekst na tym kolorze

Wybierz kolor

Wpisz kod HEX

HEX#0070F3

RGBrgb(0, 112, 243)

HSLhsl(212, 100%, 48%)

CMYKcmyk(100%, 54%, 0%, 5%)

CSScolor: #0070F3;

Wartości CMYK są przeliczeniem z RGB i mają charakter orientacyjny.

Biały tekst: 4,55:1, AA, spełnia
Ciemny tekst: 3,94:1, tylko duży tekst (AA large)

Harmonia palety

Losowy kolor i kody kolorów

Kliknij „Losuj kolor”, a generator wybierze dowolny kolor z pełnego zakresu RGB. Możesz też wpisać własny kod HEX albo wskazać kolor w selektorze systemowym. Każdą wartość kopiujesz osobnym przyciskiem.

HEX, RGB, HSL, CMYK i CSS

HEX to zapis szesnastkowy używany w HTML i CSS, na przykład #0070F3. RGB opisuje ilość czerwonego, zielonego i niebieskiego światła, a HSL opisuje barwę, nasycenie i jasność, co ułatwia tworzenie jaśniejszych lub ciemniejszych odcieni. CMYK to wartości procentowe farb drukarskich. Obliczamy je matematycznie z RGB, więc są orientacyjne i nie uwzględniają profilu kolorów drukarni.

W wierszu „CSS” znajdziesz gotową deklarację, którą wkleisz do arkusza stylów. Nie oferujemy na razie wartości RGBA z przezroczystością.

Paleta kolorów online

Z wybranego koloru powstaje paleta pięciu barw według harmonii: analogicznej (sąsiednie barwy), komplementarnej (barwy przeciwległe), trójkowej (trzy równo rozłożone barwy) lub monochromatycznej (odcienie jednej barwy). Dostępna jest też paleta losowa. Kliknięcie koloru w palecie kopiuje jego kod HEX, a „Kopiuj paletę” kopiuje wszystkie kody naraz.

Kontrast i czytelność

Pod kodami zobaczysz kontrast wybranego koloru z białym i ciemnym tekstem, obliczony według wzoru WCAG, wraz z informacją, czy spełnia poziom AA lub AAA. Dla zwykłego tekstu wymagany jest stosunek co najmniej 4,5:1. Sam wynik nie zastępuje testu w projekcie, ale pomaga wybrać czytelne zestawienie.

Kolory w projektach

Kody z generatora możesz użyć w arkuszach CSS, prezentacjach, grafikach i szkicach interfejsu. Jeśli kolory mają trafić do kodu QR, pamiętaj, że do skanowania najlepiej sprawdza się ciemny kod na jasnym tle. Taki kod przygotujesz w generatorze QR.

Ustawienia i opcje

Losuj kolor: Wybiera dowolny kolor i odświeża paletę losową.
Wybierz kolor / kod HEX: Własny kolor z selektora lub wpisany ręcznie.
Harmonia: Analogiczna, komplementarna, trójkowa, monochromatyczna lub losowa.
Kontrast: Stosunek do bieli i ciemnego tekstu według WCAG.

Najczęstsze pytania

Czy kody CMYK są dokładne?

Nie. To przeliczenie z RGB, które pokazuje orientacyjne wartości. Do druku skonsultuj kolor z drukarnią.

Co oznacza kontrast 4,5:1?

To minimalny stosunek jasności wymagany przez WCAG na poziomie AA dla zwykłego tekstu.

Czy mogę skopiować kolor do CSS?

Tak, skopiuj wiersz „CSS” albo sam kod HEX i wklej go do arkusza stylów.