Generator barvnih palet

Kako uporabljati generator barvnih palet

1. Izberi Osnovna barva z barvnim vzorcem ali v polje Koda osnovne barve vpiši poljubno kodo (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS-ime …).
2. Izberi Harmonija: Komplementarna, Analogna, Triadna, Razdeljena komplementarna, Tetradna (pravokotnik), Kvadrat ali Monokromatska.
3. Izberi Barvno kolo: HSL (klasično) ali OKLCH (zaznavno). Paleta se posodobi ob vsaki spremembi možnosti; osvežitev sproži tudi Ustvari paleto.
4. Posamezno barvo kopiraš z gumbom Kopiraj pod njenim vzorcem ali pa izbereš obliko v Izvozi kot (Seznam HEX, Spremenljivke CSS, Spremenljivke SCSS, Tabela JSON ali Barve Tailwind) in s Kopiraj ali Prenesi vzameš celotno paleto.

Vsak vzorec prikazuje svojo kodo HEX v črni ali beli barvi, kar ima boljši kontrast, in položaj glede na osnovno barvo (na primer +120°).

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Barvne harmonije

Barvne harmonije so fiksni koti na barvnem kolesu. Orodje začne pri odtenku osnovne barve, odtenek zavrti, nasičenost in svetlost osnovne barve pa ohrani.

• Komplementarna (0°, 180°): nasprotna barva. Največji kontrast, odlično za gumb s pozivom k dejanju na glavni barvi blagovne znamke.
• Analogna (−60°, −30°, 0°, +30°, +60°): sosede na kolesu. Mirne, naravne kombinacije, ki dobro delujejo za ozadja in ilustracije.
• Triadna (0°, 120°, 240°): trije enakomerno razporejeni odtenki. Živahna in uravnotežena; običajno ena barva prevladuje, drugi dve sta poudarka.
• Razdeljena komplementarna (0°, 150°, 210°): obe sosedi komplementa. Močan kontrast z manj napetosti kot pri čistem komplementarnem paru.
• Tetradna (pravokotnik) (0°, 60°, 180°, 240°): dva komplementarna para. Bogate palete, ki potrebujejo eno prevladujočo barvo, da ostanejo skladne.
• Kvadrat (0°, 90°, 180°, 270°): štirje enakomerno razporejeni odtenki.
• Monokromatska: en odtenek v petih stopnjah svetlosti, od temne do svetle. Idealno za stanja uporabniškega vmesnika, grafikone in subtilna oblikovanja.

Kolo HSL ali OKLCH?

Kolo HSL (klasično) je tradicionalno kolo, ki ga uporablja večina oblikovalskih orodij in vodičev. Njegova pomanjkljivost je, da enaki koti niso videti enako svetli: rumena pri 60° je videti precej svetlejša od modre pri 240° z enako svetlostjo HSL.

Kolo OKLCH (zaznavno) vrti odtenek v barvnem modelu Oklab, ki je zasnovan tako, da je svetlost videti enakomerna. Palete, zgrajene na njem, imajo barve s podobno vizualno težo, kar pomaga pri dostopnem kontrastu. Nekatere zavrtene barve lahko padejo zunaj tistega, kar zaslon lahko prikaže; orodje jim takrat nekoliko zniža kromo, da ostanejo prikazljive.

Uporaba izvožene palete

Spremenljivke CSS ustvarijo blok :root z --color-1, --color-2 …, ki ga lahko prilepiš v slogovno datoteko. Spremenljivke SCSS dajo vrstice $color-1: …;, Tabela JSON da seznam nizov HEX za skripte, Barve Tailwind pa objekt colors s ključi 100, 200, 300 …, ki ga prilepiš v konfiguracijo Tailwind.

Preden objaviš, preveri kontrast besedila: harmonija zagotavlja prijetne odtenke, ne pa berljivega besedila. Za telo besedila uporabi temne ali svetle nevtralne barve, nasičene barve palete pa obdrži za poudarke, gumbe in grafiko.