Generator paleta boja

Kako koristiti generator paleta boja

1. Odaberi Osnovnu boju uzorkom boje ili upiši bilo koji kod u Kod osnovne boje (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS naziv…).
2. Odaberi Harmoniju: Komplementarna, Analogna, Trijadna, Razdvojena komplementarna, Tetradna (pravokutnik), Kvadrat ili Monokromatska.
3. Odaberi Krug boja: HSL (klasični) ili OKLCH (perceptivni). Paleta se ažurira kad promijeniš bilo koju opciju; i Generiraj paletu je osvježava.
4. Jednu boju kopiraj gumbom Kopiraj ispod njezina uzorka ili odaberi format u Izvezi kao (popis HEX kodova, CSS varijable, SCSS varijable, JSON polje ili Tailwind boje) i gumbima Kopiraj ili Preuzmi uzmi cijelu paletu.

Svaki uzorak prikazuje svoj HEX kod u crnoj ili bijeloj boji, već prema tome što ima bolji kontrast, te svoj položaj u odnosu na osnovnu boju (na primjer +120°).

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Harmonije boja

Harmonije boja su fiksni kutovi na krugu boja. Polazeći od tona tvoje osnovne boje, alat rotira ton i zadržava zasićenost i svjetlinu osnovne boje.

• Komplementarna (0°, 180°): suprotna boja. Najveći kontrast, odlična za gumb poziva na akciju uz glavnu boju brenda.
• Analogna (−60°, −30°, 0°, +30°, +60°): susjedne boje na krugu. Mirne, prirodne kombinacije koje dobro rade za pozadine i ilustracije.
• Trijadna (0°, 120°, 240°): tri ravnomjerno raspoređena tona. Živa i uravnotežena; obično jedna boja dominira, a druge dvije su akcenti.
• Razdvojena komplementarna (0°, 150°, 210°): dva susjeda komplementarne boje. Snažan kontrast uz manje napetosti od čistog komplementarnog para.
• Tetradna (pravokutnik) (0°, 60°, 180°, 240°): dva komplementarna para. Bogate palete kojima je potrebna jedna dominantna boja da ostanu skladne.
• Kvadrat (0°, 90°, 180°, 270°): četiri ravnomjerno raspoređena tona.
• Monokromatska: jedan ton u pet stupnjeva svjetline, od tamnog do svijetlog. Idealna za stanja sučelja, grafikone i suptilne dizajne.

HSL ili OKLCH krug?

HSL (klasični) krug tradicionalan je i koristi ga većina alata za dizajn i vodiča. Mana mu je što jednaki kutovi ne izgledaju jednako svijetlo: žuta na 60° izgleda znatno svjetlije od plave na 240° pri istoj HSL svjetlini.

OKLCH (perceptivni) krug rotira ton u modelu boja Oklab, koji je osmišljen tako da svjetlina izgleda ujednačeno. Palete izrađene na njemu imaju boje slične vizualne težine, što pomaže kod pristupačnog kontrasta. Neke rotirane boje mogu pasti izvan onoga što zaslon može prikazati; alat im tada malo snizi kromu da ostanu prikazive.

Korištenje izvezene palete

CSS varijable daju blok :root s --color-1, --color-2… koji možeš zalijepiti u stilsku datoteku. SCSS varijable daju retke $color-1: …;, JSON polje daje popis HEX nizova za skripte, a Tailwind boje daje objekt colors s ključevima 100, 200, 300… za lijepljenje u tvoju Tailwind konfiguraciju.

Prije objave provjeri kontrast teksta: harmonija jamči ugodne tonove, ne i čitljiv tekst. Za osnovni tekst koristi tamne ili svijetle neutralne boje, a zasićene boje palete čuvaj za akcente, gumbe i grafike.