Generator palete boja

Kako koristiti generator palete boja

1. Odaberi Osnovna boja uzorkom boje ili upiši bilo koji kôd u Kôd osnovne boje (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS naziv…).
2. Odaberi Harmonija: Komplementarna, Analogna, Trijadna, Podijeljena komplementarna, Tetradna (pravougaonik), Kvadrat ili Monohromatska.
3. Odaberi Krug boja: HSL (klasični) ili OKLCH (perceptualni). Paleta se ažurira kad promijeniš bilo koju opciju; i Generiši paletu je osvježava.
4. Kopiraj pojedinačnu boju dugmetom Kopiraj ispod njenog uzorka ili odaberi format u Izvezi kao (HEX lista, CSS varijable, SCSS varijable, JSON niz ili Tailwind boje) i koristi Kopiraj ili Preuzmi za cijelu paletu.

Svaki uzorak prikazuje svoj HEX kôd crnom ili bijelom bojom, zavisno od toga koja ima bolji kontrast, i 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 server.

Harmonije boja

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

• Komplementarna (0°, 180°): suprotna boja. Najveći kontrast, odlična za dugme poziva na akciju uz glavnu boju brenda.
• Analogna (−60°, −30°, 0°, +30°, +60°): susjedi na krugu. Mirne, prirodne kombinacije koje dobro rade za pozadine i ilustracije.
• Trijadna (0°, 120°, 240°): tri jednako razmaknuta tona. Živa i uravnotežena; obično jedna boja dominira, a druge dvije su akcenti.
• Podijeljena komplementarna (0°, 150°, 210°): dva susjeda komplementa. Jak kontrast s manje napetosti nego čisti komplementarni par.
• Tetradna (pravougaonik) (0°, 60°, 180°, 240°): dva komplementarna para. Bogate palete kojima treba jedna dominantna boja da ostanu skladne.
• Kvadrat (0°, 90°, 180°, 270°): četiri jednako razmaknuta tona.
• Monohromatska: jedan ton u pet stepeni svjetline, od tamne do svijetle. Idealna za stanja korisničkog sučelja, grafikone i suptilne dizajne.

HSL ili OKLCH krug?

HSL (klasični) krug je tradicionalni, koji koristi većina alata za dizajn i uputstava. Mana mu je što jednaki uglovi ne izgledaju jednako svijetlo: žuta na 60° izgleda mnogo svjetlije od plave na 240° pri istoj HSL svjetlini.

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

Korištenje izvezene palete

CSS varijable daju blok :root s --color-1, --color-2… koji možeš zalijepiti u stilski list. SCSS varijable daju redove $color-1: …;, JSON niz daje listu HEX tekstova za skripte, a Tailwind boje daje objekat colors s ključevima 100, 200, 300… za lijepljenje u Tailwind konfiguraciju.

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