Spalvų Paletės Generatorius - Kurkite Darnius Spalvų Derinius

Kas yra spalvų paletės generatorius?

Spalvų paletės generatorius – tai įrankis, iš vienos pradinės spalvos, vadinamos pagrindine spalva, sukuriantis tarpusavyje derančių spalvų rinkinį. Šis spalvų paletės generatorius paima pagrindinę spalvą ir harmonijos tipą, tada, taikydamas spalvų teorijos taisykles, apskaičiuoja likusias paletės spalvas. Jis palaiko keturis harmonijos tipus: papildomąją, analogiškąją, triadinę ir monochromatinę.

Kaip įrankis sukuria paletę

Įrankis konvertuoja pagrindinę spalvą iš šešioliktainio kodo (pvz., #3B82F6) į HSL spalvų modelį. HSL spalvą apibūdina trimis skaičiais:

• Atspalvis: spalvos padėtis 360 laipsnių spalvų rate (0° yra raudona, 120° – žalia, 240° – mėlyna).
• Sodrumas: spalvos intensyvumas nuo 0 % (pilka) iki 100 % (gryna spalva).
• Šviesumas: spalvos artumas juodai arba baltai, nuo 0 % (juoda) iki 100 % (balta).

Kiekvienas harmonijos tipas pakeičia atspalvį, šviesumą arba abu šiuos parametrus, tada rezultatą vėl konvertuoja į šešioliktainį kodą.

Kaip apskaičiuoti papildomąsias spalvas

Formulė:

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

čia h yra pagrindinės spalvos atspalvis laipsniais, o h′ – naujas atspalvis. Modulio veiksmas rezultatą, viršijantį pilną apsisukimą, grąžina į spalvų ratą.

Sodrumas ir šviesumas nesikeičia.

Skaičiavimo pavyzdys: Gryna mėlyna spalva #0000FF turi 240° atspalvį, 100 % sodrumą ir 50 % šviesumą. Pridėjus 180°, gaunamas 60° atspalvis. Konvertavus 60° atspalvį atgal į šešioliktainį kodą, išlaikant tą patį sodrumą ir šviesumą, gaunama #FFFF00 – geltona spalva. Taigi šis įrankis mėlyną spalvą poruoja su geltona, o ne su oranžine.

Tai gali klaidinti, nes dailės pamokose dažnai mokoma kitokio spalvų rato – RYB (raudonos, geltonos ir mėlynos) pigmentų rato, kuriame mėlynos spalvos priešinga spalva yra oranžinė. Šis įrankis naudoja ekranuose taikomą RGB pagrindu sukurtą HSL spalvų ratą, todėl jo papildomųjų spalvų poros skiriasi nuo dažų maišymo rato porų.

Kaip apskaičiuoti analogiškąsias spalvas

Analogiškosios spalvos spalvų rate yra greta pagrindinės spalvos. Įrankis generuoja du atspalvius, nutolusius nuo pagrindinio atspalvio per 30°, ir du atspalvius, nutolusius per 60°, visiems išlaikant tą patį sodrumą ir šviesumą.

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

čia h yra pagrindinės spalvos atspalvis.

Skaičiavimo pavyzdys: mėlyna spalva #0000FF (atspalvis 240°) sukuria 270° atspalvį (#8000FF), 210° atspalvį (#0080FF), 300° atspalvį (#FF00FF) ir 180° atspalvį (#00FFFF). Kartu su pagrindine spalva paletėje yra penkios spalvos.

Kaip apskaičiuoti triadines spalvas

Triadinės spalvos spalvų rate yra nutolusios viena nuo kitos per 120°, todėl kartu su pagrindine spalva sudaro tolygiai išdėstytą trejetą.

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

Skaičiavimo pavyzdys: raudona spalva #FF0000 (atspalvis 0°) sukuria 120° atspalvį (#00FF00, žalią spalvą) ir 240° atspalvį (#0000FF, mėlyną spalvą). Trijų spalvų rinkinį sudaro raudona, žalia ir mėlyna – tie patys trys atspalviai, naudojami kaip pagrindinės skaitmeninių ekranų spalvos.

Kaip apskaičiuoti monochromatines spalvas

Monochromatinės spalvos išlaiko tą patį atspalvį ir sodrumą, keičiamas tik šviesumas. Įrankis pakeičia šviesumą 15 ir 30 procentiniais punktais į abi puses, neperžengdamas ribų nuo 5 % iki 95 %.

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

čia l yra pagrindinės spalvos šviesumas procentiniais punktais.

Skaičiavimo pavyzdys: mėlyna spalva #0000FF (šviesumas 50 %) sukuria šviesumą 65 % (#4D4DFF), šviesumą 35 % (#0000B3), šviesumą 80 % (#9999FF) ir šviesumą 20 % (#000066).

Dėl 5 % ir 95 % ribų pagrindinė spalva, kuri jau yra labai šviesi arba labai tamsi, gali du kartus pasiekti tą pačią ribą. Juoda spalva #000000 sukuria šviesumą 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) ir vėl 5 % (#0D0D0D), todėl viena spalva pasikartoja.

Įrankio naudojimas

1. Pasirinkite pagrindinę spalvą spalvų parinkikliu arba įveskite šešioliktainį kodą, pvz., #3B82F6.
2. Pasirinkite harmonijos tipą: papildomąją, analogiškąją, triadinę arba monochromatinę.
3. Peržiūrėkite sugeneruotą paletę. Ant kiekvienos spalvos pavyzdžio mygtuke rodomas jos šešioliktainis kodas.
4. Spustelėkite tą mygtuką, kad nukopijuotumėte šešioliktainį kodą, arba pasirinkite „Copy All Colors“, kad vienu metu nukopijuotumėte visą paletę.

Kontrasto prieinamumo reikmėms tikrinimas

Prie kiekvieno spalvos pavyzdžio rodomi du maži ženkleliai: vienas – kontrastui su balta, kitas – kontrastui su juoda spalva. Įrankis apskaičiuoja kontrasto santykį pagal WCAG (žiniatinklio turinio prieinamumo gairių) formulę:

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

čia C yra kontrasto santykis.

L1 yra šviesesnės spalvos santykinis skaistis, o L2 – tamsesnės spalvos santykinis skaistis. Skaistis apskaičiuojamas pagal raudonos, žalios ir mėlynos spalvų reikšmes. Ženklelyje rodoma „AA“, kai santykis yra 4,5 arba didesnis – tai WCAG nustatytas minimumas įprasto dydžio tekstui. Rodoma „!“, kai santykis yra mažesnis nei 4,5. Užvedus pelės žymeklį ant ženklelio, rodomas tikslus santykis. Juodas tekstas baltame fone pasiekia 21 santykį – didžiausią įmanomą vertę.

Įrankis taiko tą pačią kontrasto taisyklę parinkdamas kiekvieno spalvos pavyzdžio kopijavimo mygtuko spalvą. Jis palygina pavyzdžio spalvą su juoda ir balta, tada parenka tą iš dviejų, su kuria tekstas yra geriau įskaitomas. Perjungimas vyksta, kai santykinis skaistis yra maždaug 0,179 – taške, kuriame abu santykiai yra vienodi.

Dažnai užduodami klausimai

Kas yra spalvų paletės generatorius? Tai įrankis, kuris, pradėdamas nuo vienos pagrindinės spalvos ir pasirinktos harmonijos taisyklės, sukuria tarpusavyje derančių spalvų rinkinį.

Kodėl šis įrankis papildomosioms spalvoms mėlyną spalvą poruoja su geltona, o ne su oranžine? Įrankis pasuka atspalvį HSL rate per 180°, o šis ratas pagrįstas tuo, kaip ekranai maišo raudoną, žalią ir mėlyną šviesą. Dailės pamokose mokomas raudonos, geltonos ir mėlynos spalvų dažų ratas sukuria kitokias papildomųjų spalvų poras, nes jame maišomi pigmentai, o ne šviesa.

Kiek spalvų sukuria kiekvienas harmonijos tipas? Papildomųjų spalvų harmonija sukuria iš viso 2 spalvas, įskaitant pagrindinę. Triadinė harmonija sukuria 3. Analogiškoji sukuria 5. Monochromatinė sukuria 5.

Kokį spalvų modelį įrankis naudoja viduje? HSL (atspalvis, sodrumas, šviesumas). Jis konvertuoja įvestą šešioliktainį kodą į HSL, atlieka skaičiavimus, tada rezultatą vėl konvertuoja į šešioliktainį kodą.

Ar įrankis tikrina, ar spalvos yra prieinamos? Taip. Prie kiekvieno spalvos pavyzdžio rodoma, ar jo kontrastas su balta ir juoda spalva yra pakankamas, kad atitiktų WCAG AA standartą įprastam tekstui, kuriam reikia bent 4,5 santykio.

Ar projekte galiu naudoti daugiau nei vieną harmonijos tipą? Taip. Daugelyje dizainų derinami harmonijos tipai, pavyzdžiui, pagrindinėms spalvoms naudojamas analogiškų spalvų rinkinys, o mygtukui arba paryškinimui – viena papildomoji spalva.

Spalvų formatai

Įrankis kiekvieną sugeneruotą spalvą užrašo kaip šešių skaitmenų šešioliktainį kodą, prieš kurį rašomas ženklas # (pavyzdžiui, #ff0000 reiškia raudoną spalvą). Šešioliktainiai kodai tiesiogiai atitinka raudonos, žalios ir mėlynos spalvų vertes, kurių kiekviena gali būti nuo 0 iki 255. Pagrindinė spalva rodoma tiksliai taip, kaip buvo įvesta, todėl trijų skaitmenų trumpasis kodas, pvz., #F00, išlieka trumpuoju formatu. Trijų skaitmenų kodai reiškia tą pačią spalvą kaip ir šešių skaitmenų kodai: kiekvienas skaitmuo dubliuojamas, todėl #F00 yra #FF0000. HSL yra alternatyvus būdas toms pačioms spalvoms apibūdinti, naudojant atspalvį, sodrumą ir šviesumą, o ne raudonos, žalios ir mėlynos spalvų kiekius.