Generator Barvnih Palet - Ustvarjanje Harmoničnih Barvnih Shem

Kaj je generator barvnih palet?

Generator barvnih palet je orodje, ki iz ene začetne barve, imenovane primarna barva, sestavi nabor ujemajočih se barv. Ta generator barvnih palet sprejme primarno barvo in vrsto harmonije, nato pa z uporabo pravil teorije barv izračuna preostanek palete. Podpira štiri vrste harmonije: komplementarno, analogno, triadno in monokromatsko.

Kako orodje sestavi paleto

Orodje pretvori primarno barvo iz šestnajstiške kode (na primer #3B82F6) v barvni model HSL. HSL barvo opisuje s tremi števili:

• Odtenek: položaj barve na 360-stopinjskem barvnem krogu (0° je rdeča, 120° je zelena, 240° je modra).
• Nasičenost: intenzivnost barve od 0 % (siva) do 100 % (čista barva).
• Svetlost: kako blizu je barva črni ali beli, od 0 % (črna) do 100 % (bela).

Vsaka vrsta harmonije premakne odtenek, svetlost ali oboje, nato pa rezultat pretvori nazaj v šestnajstiško kodo.

Kako izračunati komplementarne barve

Formula:

$h' = (h + 180) \bmod 360$

kjer je h odtenek primarne barve v stopinjah, h′ pa novi odtenek. Korak mod rezultat, ki preseže celoten obrat, ovije nazaj na barvni krog.

Nasičenost in svetlost ostaneta enaki.

Ponazoritev izračuna: Čista modra barva #0000FF ima odtenek 240°, nasičenost 100 % in svetlost 50 %. Če prištejemo 180°, dobimo odtenek 60°. Pretvorba odtenka 60° nazaj v šestnajstiško kodo ob enaki nasičenosti in svetlosti da #FFFF00, rumeno barvo. Zato to orodje modro barvo poveže z rumeno, ne z oranžno.

To je lahko zavajajoče, saj se pri pouku likovne umetnosti pogosto uporablja drugačen barvni krog, pigmentni krog RYB (rdeča–rumena–modra), pri katerem je nasprotna barva modre oranžna. To orodje uporablja barvni krog HSL, ki temelji na RGB in ga uporabljajo zasloni, zato se njegovi komplementarni pari razlikujejo od kroga za mešanje barv.

Kako izračunati analogne barve

Analogne barve so na barvnem krogu blizu primarne barve. Orodje ustvari dva odtenka, oddaljena 30° od primarnega odtenka, in dva odtenka, oddaljena 60°, vse pri enaki nasičenosti in svetlosti.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

kjer je h odtenek primarne barve.

Ponazoritev izračuna: Modra barva #0000FF (odtenek 240°) ustvari odtenek 270° (#8000FF), odtenek 210° (#0080FF), odtenek 300° (#FF00FF) in odtenek 180° (#00FFFF). Skupaj s primarno barvo paleta vsebuje pet barv.

Kako izračunati triadne barve

Triadne barve so na barvnem krogu med seboj oddaljene 120°, zato skupaj s primarno barvo tvorijo enakomerno razporejeno trojico.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Ponazoritev izračuna: Rdeča barva #FF0000 (odtenek 0°) ustvari odtenek 120° (#00FF00, zelena) in odtenek 240° (#0000FF, modra). Nabor treh barv sestavljajo rdeča, zelena in modra, torej isti trije odtenki, ki se na digitalnih zaslonih uporabljajo kot osnovne barve.

Kako izračunati monokromatske barve

Monokromatske barve ohranijo enak odtenek in nasičenost ter spreminjajo samo svetlost. Orodje svetlost v vsako smer premakne za 15 in 30 odstotnih točk, pri čemer je omejena med 5 % in 95 %.

$l \pm 15, \qquad l \pm 30$

kjer je l svetlost primarne barve, izražena v odstotnih točkah.

Ponazoritev izračuna: Modra barva #0000FF (svetlost 50 %) ustvari svetlost 65 % (#4D4DFF), svetlost 35 % (#0000B3), svetlost 80 % (#9999FF) in svetlost 20 % (#000066).

Zaradi omejitev pri 5 % in 95 % lahko primarna barva, ki je že zelo svetla ali zelo temna, dvakrat doseže isto omejitev. Črna barva #000000 ustvari svetlost 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) in znova 5 % (#0D0D0D), zato se ena barva ponovi.

Uporaba orodja

1. Izberite primarno barvo z izbirnikom barv ali vnesite šestnajstiško kodo, na primer #3B82F6.
2. Izberite vrsto harmonije: komplementarno, analogno, triadno ali monokromatsko.
3. Oglejte si ustvarjeno paleto. Vsak barvni vzorec na gumbu prikazuje svojo šestnajstiško kodo.
4. Kliknite ta gumb, da kopirate šestnajstiško kodo, ali uporabite možnost »Copy All Colors«, da naenkrat kopirate celotno paleto.

Preverjanje kontrasta za dostopnost

Vsak barvni vzorec prikazuje dve majhni oznaki: eno za kontrast z belo in eno za kontrast s črno. Orodje izračuna kontrastno razmerje po formuli WCAG (smernice za dostopnost spletnih vsebin):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

kjer je C kontrastno razmerje.

L1 je relativna svetilnost svetlejše barve, L2 pa relativna svetilnost temnejše barve. Svetilnost izhaja iz vrednosti rdeče, zelene in modre barvne komponente. Oznaka prikazuje »AA«, ko je razmerje 4,5 ali več, kar je najmanjša vrednost WCAG za besedilo običajne velikosti. Prikazuje »!«, ko je razmerje manjše od 4,5. Če se z miškinim kazalcem pomaknete nad oznako, se prikaže natančno razmerje. Črno besedilo na belem ozadju doseže razmerje 21, kar je najvišja mogoča vrednost.

Orodje uporablja isto pravilo kontrasta za izbiro barve gumba za kopiranje na vsakem barvnem vzorcu. Barvo vzorca primerja s črno in belo, nato pa uporabi tisto od obeh, ki je bolje berljiva. Preklop se zgodi pri relativni svetilnosti približno 0,179, kjer sta obe razmerji enaki.

Pogosta vprašanja

Kaj je generator barvnih palet? To je orodje, ki iz ene primarne barve in izbranega pravila harmonije ustvari nabor barv, ki se med seboj ujemajo.

Zakaj to orodje pri komplementarnih barvah modro poveže z rumeno namesto z oranžno? Orodje zavrti odtenek za 180° na krogu HSL, ki temelji na načinu, kako zasloni mešajo rdečo, zeleno in modro svetlobo. Pigmentni krog rdeča–rumena–modra, ki se ga poučuje pri likovni umetnosti, ustvarja drugačne komplementarne pare, ker meša pigmente in ne svetlobe.

Koliko barv ustvari posamezna vrsta harmonije? Komplementarna harmonija ustvari skupaj 2 barvi, vključno s primarno. Triadna ustvari 3 barve. Analogna ustvari 5 barv. Monokromatska ustvari 5 barv.

Kateri barvni model orodje uporablja interno? HSL (odtenek, nasičenost, svetlost). Vhodno šestnajstiško kodo pretvori v HSL, izvede izračune in nato rezultat pretvori nazaj v šestnajstiško kodo.

Ali orodje preverja, ali so barve dostopne? Da. Vsak barvni vzorec prikazuje, ali ima dovolj kontrasta z belo in črno, da izpolni standard WCAG AA za običajno besedilo, ki zahteva razmerje najmanj 4,5.

Ali lahko za projekt uporabim več kot eno vrsto harmonije? Da. Številne zasnove združujejo različne vrste harmonije, na primer analogni nabor za glavne barve in eno komplementarno barvo za gumb ali poudarek.

Barvni zapisi

Orodje vsako ustvarjeno barvo zapiše kot šestmestno šestnajstiško kodo, pred katero je znak # (na primer #ff0000 za rdečo). Šestnajstiške kode neposredno določajo vrednosti rdeče, zelene in modre komponente, vsake od 0 do 255. Primarna barva je prikazana natanko tako, kot je bila vnesena, zato tričrkovna okrajšana oblika, kot je #F00, ostane v kratki obliki. Tričrkovne kode pomenijo isto barvo kot šestmestna oblika: vsaka številka se podvoji, zato je #F00 enako #FF0000. HSL je drugačen način opisovanja istih barv z uporabo odtenka, nasičenosti in svetlosti namesto količin rdeče, zelene in modre.