Generator palet kolorów

Wybierz kolor bazowy, a zaproponujemy kolory, które do niego pasują zgodnie z teorią barw, oraz pełną skalę jasnych i ciemnych odcieni (od 50 do 950) do wykorzystania na Twojej stronie lub w aplikacji.

Harmonie kolorów

Harmonie opierają się na położeniu kolorów na kole barw. Dopełniająca wykorzystuje kolor przeciwny (180°) i daje maksymalny kontrast; analogiczna – sąsiednie (±30° i ±60°), spokojne i naturalne; triadyczna – trzy kolory co 120°; dopełniająca rozszczepiona – dwóch sąsiadów koloru przeciwnego, łatwiejszą do zrównoważenia; a tetradyczna – cztery kolory co 90°. Monochromatyczna zachowuje odcień i zmienia jasność.

Klasyczna wskazówka to zasada 60-30-10: kolor dominujący na 60% projektu, drugorzędny na 30% i kolor akcentu na pozostałych 10%.

Skala odcieni 50-950

Systemy projektowe takie jak Tailwind CSS, Material czy Bootstrap używają dla każdego koloru skali od 50 (prawie biały) do 950 (prawie czarny): jasne odcienie na tła, średnie na przyciski i linki, a ciemne na teksty i stany aktywne.

Paletę obliczamy w przestrzeni barw OKLCH, która jest percepcyjnie jednorodna: przy obracaniu odcienia lub zmianie jasności kolory zachowują tę samą postrzeganą jasność, czego nie zapewnia HSL (w HSL żółty i niebieski o tej samej „jasności” wyglądają zupełnie inaczej).