Generator palety kolorów

Jak korzystać z generatora palety kolorów

1. Wybierz Kolor bazowy za pomocą próbki albo wpisz dowolny kod w polu Kod koloru bazowego (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), nazwa CSS…).
2. Wybierz Harmonia: Komplementarna, Analogiczna, Triada, Rozdzielona komplementarna, Tetrada (prostokąt), Kwadrat lub Monochromatyczna.
3. Wybierz Koło barw: HSL (klasyczne) lub OKLCH (percepcyjne). Paleta aktualizuje się przy każdej zmianie opcji; przycisk Generuj paletę również ją odświeża.
4. Skopiuj pojedynczy kolor przyciskiem Kopiuj pod jego próbką albo wybierz format w polu Eksportuj jako (Lista HEX, Zmienne CSS, Zmienne SCSS, Tablica JSON lub Kolory Tailwind) i użyj przycisku Kopiuj lub Pobierz dla całej palety.

Każda próbka pokazuje swój kod HEX w czerni lub bieli – w zależności od tego, co daje lepszy kontrast – oraz swoje położenie względem koloru bazowego (np. +120°).

Harmonie barw

Harmonie barw to stałe kąty na kole barw. Zaczynając od odcienia bazowego, narzędzie obraca odcień, zachowując nasycenie i jasność koloru bazowego.

• Komplementarna (0°, 180°): kolor przeciwny. Maksymalny kontrast, świetny np. dla przycisku wezwania do działania na tle głównego koloru marki.
• Analogiczna (−60°, −30°, 0°, +30°, +60°): sąsiedzi na kole. Spokojne, naturalne zestawienia, które dobrze sprawdzają się w tłach i ilustracjach.
• Triada (0°, 120°, 240°): trzy równo rozłożone odcienie. Żywa i zrównoważona; zwykle jeden kolor dominuje, a dwa pozostałe są akcentami.
• Rozdzielona komplementarna (0°, 150°, 210°): dwaj sąsiedzi koloru dopełniającego. Silny kontrast z mniejszym napięciem niż czysta para komplementarna.
• Tetrada (prostokąt) (0°, 60°, 180°, 240°): dwie pary komplementarne. Bogate palety, które potrzebują jednego dominującego koloru, by pozostać spójne.
• Kwadrat (0°, 90°, 180°, 270°): cztery równo rozłożone odcienie.
• Monochromatyczna: jeden odcień w pięciu stopniach jasności, od ciemnego do jasnego. Idealna dla stanów interfejsu, wykresów i stonowanych projektów.

Koło HSL czy OKLCH?

Koło HSL (klasyczne) to tradycyjne koło używane w większości narzędzi projektowych i poradników. Jego wadą jest to, że równe kąty nie wyglądają na równie jasne: żółty przy 60° wydaje się znacznie jaśniejszy niż niebieski przy 240° przy tej samej jasności HSL.

Koło OKLCH (percepcyjne) obraca odcień w modelu barw Oklab, zaprojektowanym tak, by jasność wyglądała spójnie. Zbudowane na nim palety mają kolory o podobnej wadze wizualnej, co ułatwia uzyskanie dostępnego kontrastu. Niektóre obrócone kolory mogą wykraczać poza to, co potrafi pokazać ekran; narzędzie lekko zmniejsza wtedy ich nasycenie (chromę), aby dało się je wyświetlić.

Jak użyć wyeksportowanej palety

Zmienne CSS tworzą blok :root z --color-1, --color-2…, który możesz wkleić do arkusza stylów. Zmienne SCSS dają wiersze $color-1: …;, Tablica JSON – listę napisów HEX do skryptów, a Kolory Tailwind – obiekt colors z kluczami 100, 200, 300…, gotowy do wklejenia w konfiguracji Tailwind.

Zanim opublikujesz projekt, sprawdź kontrast tekstu: harmonia gwarantuje przyjemne odcienie, a nie czytelny tekst. Do tekstu głównego używaj ciemnych lub jasnych neutralnych barw, a nasycone kolory palety zachowaj dla akcentów, przycisków i grafik.