Színharmónia-generátor
Technikai részletek
Hogyan működik a Színharmóniák Generátor
Mit csinál az eszköz
A Színharmóniák Generátor matematikailag összefüggő színkészleteket számít ki egyetlen alapszínből: komplementer, analóg, triád, tetrád, négyzet, osztott komplementer, monokróm és árnyalatok. Minden paletta HEX, RGB és HSL értékekkel jelenik meg, amelyeket egy kattintással másolhatsz, és közvetlenül használhatsz CSS-ben vagy design tokenekben.
Gyakori fejlesztői felhasználási esetek
A dizájnerek márkapalettákat prototipizálnak azzal, hogy megvizsgálják, hogyan alakul egy márkaszín különböző harmóniaszabályok mellett. A frontend fejlesztők egy elsődleges márkaszínből indítva választanak akcentusszíneket gombokhoz, értesítésekhez és jelvényekhez. Az adatvizualizációs mérnökök olyan kategóriaszín-készleteket választanak, amelyek szándékosnak hatnak, mégis megkülönböztethetők maradnak. A termékmenedzserek palettaopciókat hasonlítanak össze a dizájnjavaslatok áttekintésekor anélkül, hogy dedikált tervezőeszközökre lenne szükségük.
Adatformátumok, típusok vagy változatok
Nyolc séma érhető el: Komplementer (alap + 180°), Analóg (alap ± 30°), Triád (3 szín 120°-onként), Tetrád (téglalap alakú 4 szín), Négyzet (4 szín 90°-onként), Osztott komplementer (alap + ±150°), Monokróm (azonos árnyalat eltérő világossággal 10–90%), és Árnyalatok (azonos árnyalat, sötéttől világosig). Minden szín tartalmazza a HEX, RGB és HSL reprezentációját, valamint egy szerepcímkét.
Gyakori buktatók és szélső esetek
A rendkívül telítetlen vagy szürkéhez közeli alapszínekből származtatott harmóniák a sémák között megkülönböztethetetlennek tűnnek — indulj telített alapszínből. A nagyon telített alapszínek triád vagy tetrád sémákkal kombinálva harsány, nehezen kiegyensúlyozható palettákat adhatnak; UI-használathoz érdemes visszavenni a telítettséget. Egyes harmóniákból származó párosítások nem felelnek meg a WCAG kontrasztkövetelményeinek — élesítés előtt mindig ellenőrizd a szöveg/háttér párokat a Színkontraszt eszközben.
Mikor érdemes ezt az eszközt használni a kód helyett
Használd a böngészős eszközt ötleteléshez, gyors felfedezéshez és dizájnreview-hoz. Kódban olyan könyvtárak, mint a chroma.js, a colord vagy a culori lehetővé teszik a harmóniák programozott kiszámítását, a design token build pipeline-okba való integrálását, valamint a harmóniaszámítás kombinálását perceptuálisan egyenletes színterekkel, például az Oklch-val, az egyenletesebb megjelenésű palettákért.