Generator harmonii kolorów

Jak działa generator harmonii kolorów

Co robi narzędzie

Generator harmonii kolorów oblicza matematycznie powiązane zestawy barw na podstawie pojedynczego bazowego odcienia: dopełniające, analogiczne, triadyczne, tetradyczne, kwadratowe, dzielone dopełniające, monochromatyczne oraz odcienie. Każda paleta jest prezentowana z wartościami HEX, RGB i HSL, które możesz skopiować jednym kliknięciem i użyć bezpośrednio w CSS lub jako tokeny projektowe.

Typowe zastosowania dla programistów

Projektanci prototypują palety marki, sprawdzając, jak odcień marki zmienia się w różnych regułach harmonii. Programiści frontend wyprowadzają kolory akcentów dla przycisków, alertów i odznak z podstawowego koloru marki. Inżynierowie wizualizacji danych dobierają kategoryczne zestawy barw, które wyglądają celowo, a jednocześnie pozostają rozróżnialne. Product managerowie porównują warianty palet podczas przeglądu propozycji projektowych bez potrzeby korzystania z dedykowanych narzędzi projektowych.

Formaty danych, typy lub warianty

Dostępnych jest osiem schematów: Dopełniający (baza + 180°), Analogiczny (baza ± 30°), Triadyczny (3 kolory oddalone o 120°), Tetradyczny (prostokątny układ 4 kolorów), Kwadratowy (4 kolory oddalone o 90°), Dzielony dopełniający (baza + ±150°), Monochromatyczny (ten sam odcień przy różnej jasności 10–90%) oraz Odcienie (ten sam odcień, od ciemnego do jasnego). Każdy kolor zawiera reprezentacje HEX, RGB i HSL wraz z etykietą roli.

Typowe pułapki i przypadki brzegowe

Harmonie wyprowadzone z bardzo mało nasyconych lub niemal szarych kolorów bazowych wyglądają nierozróżnialnie w różnych schematach — zacznij od nasyconej bazy. Bardzo nasycone bazy w połączeniu ze schematami triadycznymi lub tetradycznymi mogą dawać krzykliwe, trudne do zrównoważenia palety; rozważ zmniejszenie nasycenia na potrzeby interfejsu. Niektóre zestawienia wynikające z harmonii nie spełniają kontrastu WCAG — zawsze weryfikuj pary tekst/tło w narzędziu Color Contrast przed wdrożeniem.

Kiedy używać tego narzędzia zamiast kodu

Używaj narzędzia w przeglądarce do generowania pomysłów, szybkiej eksploracji i przeglądu projektu. W kodzie biblioteki takie jak chroma.js, colord lub culori pozwalają obliczać harmonie programowo, integrować je z potokami budowania tokenów projektowych oraz łączyć matematykę harmonii z percepcyjnie jednorodnymi przestrzeniami barw, takimi jak Oklch, aby uzyskać bardziej równomiernie wyglądające palety.