Väripalettien Generaattori - Luo Harmonisia Värikokonaisuuksia

Mikä on väripalettigeneraattori?

Väripalettigeneraattori on työkalu, joka muodostaa yhden lähtövärin eli päävärin perusteella toisiinsa sopivien värien joukon. Tämä väripalettigeneraattori ottaa päävärin ja harmonian tyypin ja laskee sitten paletin muut värit väriteorian sääntöjen avulla. Sen tukemat neljä harmonian tyyppiä ovat komplementaarinen, analoginen, triadinen ja monokromaattinen.

Miten työkalu muodostaa paletin

Työkalu muuntaa päävärin heksadesimaalikoodista (kuten #3B82F6) HSL-värimalliin. HSL kuvaa väriä kolmella luvulla:

• Sävy: värin sijainti 360 asteen väripyörällä (0° on punainen, 120° vihreä ja 240° sininen).
• Kylläisyys: värin voimakkuus välillä 0 % (harmaa) – 100 % (puhdas väri).
• Valoisuus: värin läheisyys mustaan tai valkoiseen välillä 0 % (musta) – 100 % (valkoinen).

Kukin harmonian tyyppi muuttaa sävyä, valoisuutta tai molempia ja muuntaa tuloksen sitten takaisin heksadesimaalikoodiksi.

Miten komplementaariset värit lasketaan

Kaava:

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

jossa h on päävärin sävy asteina ja h′ uusi sävy. Modulo-operaation vaihe palauttaa täyden kierroksen ylittävän tuloksen takaisin väriympyrälle.

Kylläisyys ja valoisuus pysyvät samoina.

Laskuesimerkki: Puhdas sininen, #0000FF, sisältää sävyn 240°, kylläisyyden 100 % ja valoisuuden 50 %. Kun sävyyn lisätään 180°, saadaan sävy 60°. Kun sävy 60° muunnetaan takaisin heksadesimaalikoodiksi samalla kylläisyydellä ja valoisuudella, tulokseksi saadaan #FFFF00 eli keltainen. Siksi tämä työkalu yhdistää sinisen keltaiseen eikä oranssiin.

Tämä voi tuntua hämmentävältä, koska taideopetuksessa käytetään usein erilaista väripyörää, RYB-pigmenttiväripyörää (punainen–keltainen–sininen), jossa sinisen vastaväri on oranssi. Tämä työkalu käyttää näyttöjen RGB-väreihin perustuvaa HSL-väripyörää, joten sen komplementaariset väriyhdistelmät poikkeavat maalien sekoittamiseen tarkoitetusta väripyörästä.

Miten analogiset värit lasketaan

Analogiset värit sijaitsevat väripyörällä lähellä pääväriä. Työkalu muodostaa kaksi sävyä 30° ja kaksi sävyä 60° päävärin sävystä, kaikki samalla kylläisyydellä ja valoisuudella.

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

jossa h on päävärin sävy.

Laskuesimerkki: Sininen #0000FF (sävy 240°) tuottaa sävyn 270° (#8000FF), sävyn 210° (#0080FF), sävyn 300° (#FF00FF) ja sävyn 180° (#00FFFF). Pääväri mukaan lukien paletissa on viisi väriä.

Miten triadiset värit lasketaan

Triadiset värit sijaitsevat väripyörällä 120°:n päässä toisistaan ja muodostavat päävärin kanssa tasavälisen kolmikon.

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

Laskuesimerkki: Punainen #FF0000 (sävy 0°) tuottaa sävyn 120° (#00FF00, vihreä) ja sävyn 240° (#0000FF, sininen). Kolmen värin joukko on punainen, vihreä ja sininen eli samat kolme sävyä, joita käytetään digitaalisten näyttöjen pääväreinä.

Miten monokromaattiset värit lasketaan

Monokromaattisissa väreissä sävy ja kylläisyys pysyvät samoina, ja vain valoisuus muuttuu. Työkalu muuttaa valoisuutta 15 ja 30 prosenttiyksikköä kumpaankin suuntaan, rajaten arvon välille 5 %–95 %.

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

jossa l tarkoittaa päävärin vaaleutta prosenttiyksikköinä.

Laskuesimerkki: Sininen #0000FF (valoisuus 50 %) tuottaa valoisuuden 65 % (#4D4DFF), valoisuuden 35 % (#0000B3), valoisuuden 80 % (#9999FF) ja valoisuuden 20 % (#000066).

Koska rajat ovat 5 % ja 95 %, jo valmiiksi hyvin vaalea tai hyvin tumma pääväri voi osua samaan rajaan kahdesti. Musta #000000 tuottaa valoisuudet 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) ja jälleen 5 % (#0D0D0D), joten yksi väri toistuu.

Työkalun käyttö

1. Valitse pääväri värivalitsimella tai kirjoita heksadesimaalikoodi, kuten #3B82F6.
2. Valitse harmonian tyyppi: komplementaarinen, analoginen, triadinen tai monokromaattinen.
3. Tarkastele muodostettua palettia. Jokainen väriruutu näyttää heksadesimaalikoodinsa painikkeessa.
4. Napsauta painiketta kopioidaksesi heksadesimaalikoodin tai kopioi koko paletti kerralla valitsemalla ”Copy All Colors”.

Kontrastin tarkistaminen esteettömyyttä varten

Jokaisessa väriruudussa näkyy kaksi pientä merkkiä: yksi valkoista taustaa ja toinen mustaa taustaa vasten laskettua kontrastia varten. Työkalu laskee kontrastisuhteen WCAG:n (verkkosisällön saavutettavuusohjeet) kaavan avulla:

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

jossa C on kontrastisuhde.

L1 on vaaleamman värin suhteellinen luminanssi ja L2 tummemman värin suhteellinen luminanssi. Luminanssi määräytyy värin punaisen, vihreän ja sinisen arvon perusteella. Tunnuksessa lukee ”AA”, kun suhde on vähintään 4,5, joka on WCAG:n normaalikokoiselle tekstille määrittämä vähimmäisarvo. Tunnuksessa lukee ”!”, kun suhde on alle 4,5. Kun tunnuksen päällä pidetään osoitinta, näkyviin tulee tarkka suhde. Musta teksti valkoisella taustalla saa suhdeluvuksi 21, joka on suurin mahdollinen arvo.

Työkalu käyttää samaa kontrastisääntöä valitessaan kopiointipainikkeen värin kuhunkin väriruutuun. Se vertaa väriruudun väriä mustaan ja valkoiseen ja käyttää sitten sitä, joka erottuu paremmin. Vaihto tapahtuu suhteellisen luminanssin ollessa noin 0,179, kohdassa, jossa molemmat suhdeluvut ovat yhtä suuret.

Usein kysyttyä

Mikä on väripalettigeneraattori? Se on työkalu, joka muodostaa toisiinsa sopivien värien joukon yhdestä pääväristä ja valitusta harmoniasäännöstä lähtien.

Miksi tämä työkalu yhdistää sinisen keltaiseen eikä oranssiin komplementaarisissa väreissä? Työkalu kiertää sävyä 180° HSL-väripyörällä, joka perustuu siihen, miten näytöt sekoittavat punaista, vihreää ja sinistä valoa. Taideopetuksessa käytetty punainen–keltainen–sininen-väripyörä tuottaa erilaiset vastaväriyhdistelmät, koska siinä sekoitetaan pigmenttejä eikä valoa.

Kuinka monta väriä kukin harmonian tyyppi tuottaa? Komplementaarinen tuottaa yhteensä 2 väriä (pääväri mukaan lukien). Triadinen tuottaa 3 väriä. Analoginen tuottaa 5 väriä. Monokromaattinen tuottaa 5 väriä.

Mitä värimallia työkalu käyttää sisäisesti? HSL:ää (sävy, kylläisyys ja valoisuus). Se muuntaa syötetyn heksadesimaalikoodin HSL:ksi, suorittaa laskutoimitukset ja muuntaa tuloksen sitten takaisin heksadesimaalikoodiksi.

Tarkistaako työkalu värien esteettömyyden? Kyllä. Jokainen väriruutu näyttää, onko sen kontrasti valkoista ja mustaa vasten riittävä täyttämään WCAG:n AA-tason normaalikokoiselle tekstille, joka edellyttää vähintään suhdelukua 4,5.

Voiko projektissa käyttää useampaa kuin yhtä harmonian tyyppiä? Kyllä. Monissa suunnitelmissa yhdistetään harmonian tyyppejä, esimerkiksi käytetään analogista väriyhdistelmää pääväreinä ja yhtä komplementaarista väriä painikkeessa tai korostuksessa.

Värimuodot

Työkalu kirjoittaa jokaisen muodostetun värin kuusinumeroisena heksadesimaalikoodina, jota edeltää #-merkki (esimerkiksi #ff0000 punaiselle). Heksadesimaalikoodit vastaavat suoraan punaisen, vihreän ja sinisen arvoja välillä 0–255 kukin. Pääväri näytetään täsmälleen siinä muodossa kuin se syötettiin, joten esimerkiksi kolminumeroinen lyhyt muoto #F00 säilyy lyhyenä. Kolminumeroiset koodit ilmaisevat saman värin kuin kuusinumeroiset koodit: jokainen numero kahdennetaan, joten #F00 on #FF0000. HSL on vaihtoehtoinen tapa kuvata samoja värejä sävyn, kylläisyyden ja valoisuuden avulla punaisen, vihreän ja sinisen määrien sijaan.