PL

Generator palet kolorów

Wpisz kolor bazowy jako HEX, RGB lub HSL albo wybierz go próbnikiem, a potem wybierz harmonię kolorów. Generator obraca odcień po kole barw HSL i pokazuje każdy kolor jako próbkę z wartościami HEX, RGB i HSL gotowymi do skopiowania.

np. #3B82F6, rgb(59, 130, 246) lub hsl(217, 91%, 60%)
Wpisane dane są zapisywane tylko w tej przeglądarce.

Próbki kolorów

  • Kolor bazowy#3B82F6
  • +120°#F63B82
  • +240°#82F63B

Wynik

Paleta kolorów
KolorHEXRGBHSL
Kolor bazowy#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)
+120°#F63B82rgb(246, 59, 130)hsl(337, 91%, 60%)
+240°#82F63Brgb(130, 246, 59)hsl(97, 91%, 60%)

Jak to obliczamy

Jak powstają harmonie kolorów

Generator przelicza kolor bazowy na model HSL (odcień H w stopniach, nasycenie S i jasność L w procentach, jak w CSS Color Module Level 4). W każdej harmonii obracany jest tylko odcień; nasycenie i jasność pozostają bez zmian. Następnie każdy kolor jest przeliczany z powrotem na sRGB i zaokrąglany do liczb całkowitych od 0 do 255.

HarmoniaObrót odcieniaKolory
Dopełniające0°, 180°2
Analogiczne−30°, 0°, +30°3
Triada0°, 120°, 240°3
Dopełniające rozdzielone0°, 150°, 210°3
Tetrada (prostokąt)0°, 60°, 180°, 240°4
Kwadrat0°, 90°, 180°, 270°4
Monochromatycznebez obrotu; jasność w 5 stopniach5

Przykład: czysta czerwień #FF0000 ma H = 0°, S = 100%, L = 50%. Po obrocie o 180° otrzymujemy H = 180° – to cyjan #00FFFF, kolor dopełniający. Triada dodaje 120° (zieleń #00FF00) i 240° (niebieski #0000FF).

Paleta monochromatyczna

W trybie „Monochromatyczne” odcień się nie zmienia. Jasność przesuwa się w dwóch równych krokach w stronę czerni i w dwóch w stronę bieli. Dla domyślnego koloru #3B82F6 (L ≈ 60%) stopnie wypadają przy ok. 20%, 40%, 60%, 73% i 87%.

Czytelny tekst na próbkach

Opis na każdej próbce jest czarny lub biały – zależnie od tego, co daje wyższy kontrast według wzoru na luminancję względną z WCAG. Dzięki temu tekst zawsze osiąga co najmniej 4,58:1. Aby sprawdzić, czy dwa kolory z palety sprawdzą się jako tekst i tło, użyj narzędzia do sprawdzania kontrastu kolorów.

Ograniczenia

HSL to prosty model geometryczny, a nie percepcyjnie równomierny: przy tym samym L żółty wygląda na znacznie jaśniejszy niż niebieski. Traktuj obliczone harmonie jako punkt wyjścia i dopracuj je na oko. Szarości nie mają odcienia, więc ich obrót daje ten sam kolor.

Najczęściej zadawane pytania

Jaki jest kolor dopełniający do niebieskiego?

Leży naprzeciwko, 180° dalej na kole barw HSL. Dla niebieskiego #0000FF (H = 240°) to żółty #FFFF00 (H = 60°); dla #3B82F6 (H ≈ 217°) pomarańczowy w okolicy #F6AF3B.

Jakie formaty kolorów przyjmuje generator?

HEX z 3, 4, 6 lub 8 znakami (z # lub bez), rgb() i rgba(), hsl() i hsla(), hsv()/hsb(), hwb() oraz trzy zwykłe liczby, np. „59, 130, 246” (odczytywane jako RGB). Działa zarówno zapis z przecinkami, jak i ze spacjami z CSS Color 4.

Jak użyć kolorów w CSS lub programie graficznym?

Każda próbka ma przycisk kopiowania wartości HEX. „Kopiuj jako zmienne CSS” umieszcza w schowku blok :root ze zmiennymi --farbe-1, --farbe-2 … Wartości RGB i HSL znajdziesz w tabeli poniżej.

Dlaczego niektóre harmonie wyglądają na niezrównoważone?

HSL mierzy jasność czysto matematycznie. Przy tej samej wartości L żółty i cyjan wyglądają na dużo jaśniejsze niż niebieski czy fiolet. W razie potrzeby popraw jasność poszczególnych kolorów albo zacznij od mniej nasyconego koloru bazowego.

Jak dobrać kolory, które do siebie pasują?

Najbezpieczniejsze są palety analogiczne i monochromatyczne – kolory leżą blisko siebie na kole barw. Dopełniające i triada dają mocniejszy kontrast; wtedy jeden kolor zwykle dominuje, a pozostałe służą jako akcenty.

Źródła i podstawa prawna

Stan na:

Podobne narzędzia