Generator Paleta Boja - Stvaranje Harmoničnih Shema Boja

Što je generator palete boja?

Generator palete boja alat je koji od jedne početne boje, koja se naziva primarna boja, sastavlja skup podudarajućih boja. Ovaj generator palete boja prima primarnu boju i vrstu harmonije, a zatim izračunava ostatak palete primjenom pravila teorije boja. Podržane su četiri vrste harmonije: komplementarna, analogna, trijadna i monokromatska.

Kako alat sastavlja paletu

Alat pretvara primarnu boju iz heksadekadskog kôda (kao što je #3B82F6) u model boja HSL. HSL opisuje boju s pomoću triju brojeva:

• Nijansa: položaj boje na 360-stupanjskom kotaču boja (0° je crvena, 120° je zelena, 240° je plava).
• Zasićenost: intenzitet boje, od 0 % (siva) do 100 % (čista boja).
• Svjetlina: koliko je boja blizu crnoj ili bijeloj, od 0 % (crna) do 100 % (bijela).

Svaka vrsta harmonije pomiče nijansu, svjetlinu ili oboje, a zatim rezultat ponovno pretvara u heksadekadski kôd.

Kako izračunati komplementarne boje

Formula:

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

gdje je h nijansa primarne boje izražena u stupnjevima, a h′ nova nijansa. Operacija modulo preslikava rezultat koji premašuje puni krug natrag na kotač boja.

Zasićenost i svjetlina ostaju iste.

Primjer izračuna: Čista plava boja, #0000FF, ima nijansu 240°, zasićenost 100 % i svjetlinu 50 %. Dodavanjem 180° dobiva se nijansa 60°. Pretvaranjem nijanse 60° natrag u heksadekadski kôd, uz istu zasićenost i svjetlinu, dobiva se #FFFF00, odnosno žuta boja. Zato ovaj alat spaja plavu sa žutom, a ne s narančastom.

To može biti zbunjujuće jer se na satovima likovne umjetnosti često podučava drukčiji kotač boja, pigmentni kotač RYB (crveno-žuto-plavi), na kojem je suprotna boja plavoj narančasta. Ovaj alat koristi kotač HSL koji se temelji na RGB-u i primjenjuje se na zaslonima, pa se njegovi komplementarni parovi razlikuju od kotača za miješanje boja.

Kako izračunati analogne boje

Analogne boje nalaze se blizu primarne boje na kotaču. Alat generira dvije nijanse udaljene 30° i dvije nijanse udaljene 60° od primarne nijanse, sve uz istu zasićenost i svjetlinu.

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

gdje je h nijansa primarne boje.

Primjer izračuna: Plava boja, #0000FF (nijansa 240°), daje nijansu 270° (#8000FF), nijansu 210° (#0080FF), nijansu 300° (#FF00FF) i nijansu 180° (#00FFFF). Zajedno s primarnom bojom paleta sadržava pet boja.

Kako izračunati trijadne boje

Trijadne boje na kotaču su međusobno udaljene 120°, tvoreći ravnomjerno raspoređenu trojku s primarnom bojom.

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

Primjer izračuna: Crvena boja, #FF0000 (nijansa 0°), daje nijansu 120° (#00FF00, zelena) i nijansu 240° (#0000FF, plava). Skup od triju boja čine crvena, zelena i plava, iste tri nijanse koje se koriste kao primarne boje na digitalnim zaslonima.

Kako izračunati monokromatske boje

Monokromatske boje zadržavaju istu nijansu i zasićenost, a mijenjaju samo svjetlinu. Alat pomiče svjetlinu za 15 i 30 postotnih bodova u svakom smjeru, uz ograničenje između 5 % i 95 %.

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

gdje je l svjetlina primarne boje izražena u postotnim bodovima.

Primjer izračuna: Plava boja, #0000FF (svjetlina 50 %), daje svjetlinu 65 % (#4D4DFF), svjetlinu 35 % (#0000B3), svjetlinu 80 % (#9999FF) i svjetlinu 20 % (#000066).

Zbog ograničenja od 5 % i 95 % primarna boja koja je već vrlo svijetla ili vrlo tamna može dvaput dosegnuti isto ograničenje. Crna boja, #000000, daje svjetlinu 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) i ponovno 5 % (#0D0D0D), pa se jedna boja ponavlja.

Upotreba alata

1. Odaberite primarnu boju biračem boja ili upišite heksadekadski kôd, primjerice #3B82F6.
2. Odaberite vrstu harmonije: komplementarnu, analognu, trijadnu ili monokromatsku.
3. Pregledajte generiranu paletu. Uzorak boje prikazuje svoj heksadekadski kôd na gumbu.
4. Kliknite taj gumb da biste kopirali heksadekadski kôd ili upotrijebite "Kopiraj sve boje" da biste odjednom kopirali cijelu paletu.

Provjera kontrasta radi pristupačnosti

Svaki uzorak boje prikazuje dvije male oznake: jednu za kontrast prema bijeloj, a drugu za kontrast prema crnoj boji. Alat izračunava omjer kontrasta prema formuli WCAG-a (smjernice za pristupačnost web-sadržaja):

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

gdje je C omjer kontrasta.

L1 je relativna luminancija svjetlije boje, a L2 relativna luminancija tamnije boje. Luminancija se dobiva iz crvene, zelene i plave vrijednosti boje. Oznaka glasi "AA" kada je omjer 4,5 ili veći, što je najmanja vrijednost prema WCAG-u za tekst normalne veličine. Glasi "!" kada je omjer manji od 4,5. Prelaskom pokazivača iznad oznake prikazuje se točan omjer. Crni tekst na bijeloj pozadini ima omjer 21, najveću moguću vrijednost.

Alat koristi isto pravilo kontrasta za odabir boje gumba za kopiranje na svakom uzorku. Uspoređuje boju uzorka s crnom i bijelom, a zatim postavlja onu od dviju boja s kojom je tekst čitljiviji. Promjena se događa pri relativnoj luminanciji od približno 0,179, odnosno u točki u kojoj su oba omjera jednaka.

Često postavljana pitanja

Što je generator palete boja? To je alat koji proizvodi skup boja koje međusobno dobro funkcioniraju, počevši od jedne primarne boje i odabranog pravila harmonije.

Zašto ovaj alat spaja plavu sa žutom umjesto s narančastom kod komplementarnih boja? Alat zakreće nijansu za 180° na HSL kotaču, koji se temelji na načinu na koji zasloni miješaju crveno, zeleno i plavo svjetlo. Kotač crveno-žuto-plavih pigmenata koji se podučava na satovima likovne umjetnosti daje drukčije komplementarne parove jer miješa pigmente, a ne svjetlost.

Koliko boja proizvodi svaka vrsta harmonije? Komplementarna proizvodi ukupno 2 boje, uključujući primarnu. Trijadna proizvodi 3 boje. Analogna proizvodi 5 boja. Monokromatska proizvodi 5 boja.

Koji model boja alat interno koristi? HSL (nijansa, zasićenost, svjetlina). Ulazni heksadekadski kôd pretvara u HSL, obavlja izračun, a zatim rezultat ponovno pretvara u heksadekadski kôd.

Provjerava li alat jesu li boje pristupačne? Da. Svaki uzorak boje pokazuje ima li dovoljan kontrast prema bijeloj i crnoj boji da bi zadovoljio standard WCAG AA za uobičajeni tekst, koji zahtijeva omjer od najmanje 4,5.

Mogu li za projekt upotrijebiti više od jedne vrste harmonije? Da. Mnogi dizajni kombiniraju vrste harmonije, primjerice analogni skup za glavne boje i jednu komplementarnu boju za gumb ili isticanje.

Formati boja

Alat svaku generiranu boju zapisuje kao šesteroznamenkasti heksadekadski kôd kojem prethodi znak # (na primjer #ff0000 za crvenu boju). Heksadekadski kôdovi izravno odgovaraju vrijednostima crvene, zelene i plave boje od 0 do 255 za svaku od njih. Primarna se boja prikazuje točno onako kako je unesena, pa troznamenkasti skraćeni zapis poput #F00 ostaje u kratkom obliku. Troznamenkasti kôdovi označavaju istu boju kao šesteroznamenkasti oblik: svaka se znamenka udvostručuje, pa je #F00 jednako #FF0000. HSL je alternativan način opisivanja istih boja, pri čemu se koriste nijansa, zasićenost i svjetlina umjesto količina crvene, zelene i plave boje.