Spalvų harmonijų generatorius

Kaip veikia spalvų harmonijų generatorius

Ką daro įrankis

Spalvų harmonijų generatorius matematiškai apskaičiuoja susijusius spalvų rinkinius iš vieno bazinio atspalvio: komplementarią, analogišką, triadinę, tetradinę, kvadratinę, skeltinę komplementarią, monochromatinę ir atspalvius. Kiekviena paletė pateikiama su HEX, RGB ir HSL reikšmėmis, kurias galite nukopijuoti vienu paspaudimu ir naudoti tiesiogiai CSS arba dizaino tokenuose.

Dažniausi kūrėjų naudojimo atvejai

Dizaineriai prototipuoja prekės ženklo paletes tyrinėdami, kaip prekės ženklo atspalvis kinta taikant skirtingas harmonijos taisykles. Frontend programuotojai iš pirminės prekės ženklo spalvos parenka akcentines spalvas mygtukams, įspėjimams ir ženkliukams. Duomenų vizualizacijos inžinieriai renkasi kategorinių spalvų rinkinius, kurie atrodo apgalvoti, bet išlieka atskiriami. Produktų vadovai lygina paletės variantus peržiūrėdami dizaino pasiūlymus be specialių dizaino įrankių.

Duomenų formatai, tipai arba variantai

Galimos aštuonios schemos: komplementari (bazė + 180°), analogiška (bazė ± 30°), triadinė (3 spalvos kas 120°), tetradinė (stačiakampė 4 spalvų), kvadratinė (4 spalvos kas 90°), skeltinė komplementari (bazė + ±150°), monochromatinė (tas pats atspalvis su skirtingu šviesumu 10–90%) ir atspalviai (tas pats atspalvis, nuo tamsaus iki šviesaus). Kiekviena spalva turi HEX, RGB ir HSL atvaizdavimus kartu su rolės etikete.

Dažniausios klaidos ir kraštiniai atvejai

Harmonijos, išvestos iš itin mažai prisotintų ar beveik pilkų bazinių spalvų, skirtingose schemose atrodo neatskiriamos — pradėkite nuo prisotintos bazės. Labai prisotintos bazės, derinamos su triadinėmis ar tetradinėmis schemomis, gali sukurti ryškias, sunkiai subalansuojamas paletes; UI naudojimui apsvarstykite galimybę sumažinti prisotinimą. Kai kurie iš harmonijų gauti deriniai neatitinka WCAG kontrasto — prieš paleisdami visada patikrinkite teksto ir fono poras Spalvų kontrasto įrankyje.

Kada naudoti šį įrankį, o kada kodą

Naudokite naršyklės įrankį idėjoms generuoti, greitai tyrinėti ir dizainui peržiūrėti. Kode tokios bibliotekos kaip chroma.js, colord ar culori leidžia programiškai skaičiuoti harmonijas, integruoti jas į dizaino tokenų build srautus ir derinti harmonijų matematiką su perceptiškai tolygiomis spalvų erdvėmis, tokiomis kaip Oklch, kad paletės atrodytų tolygesnės.