Generator for fargeharmonier
Tekniske detaljer
Slik fungerer generatoren for fargeharmonier
Hva verktøyet gjør
Generatoren for fargeharmonier beregner matematisk relaterte fargesett fra én enkelt grunntone: komplementær, analog, triadisk, tetradisk, kvadrat, splitt-komplementær, monokromatisk og nyanser. Hver palett gjengis med HEX-, RGB- og HSL-verdier som du kan kopiere med ett klikk og bruke direkte i CSS eller designtokens.
Vanlige bruksområder for utviklere
Designere prototyper merkevarepaletter ved å utforske hvordan en merketone utvikler seg under ulike harmoniregler. Frontend-utviklere henter aksentfarger for knapper, varsler og merker fra en primær merkevarefarge. Datavisualiseringsingeniører velger kategoriske fargesett som ser gjennomtenkte ut, men fortsatt er lette å skille. Produktledere sammenligner palettalternativer når de vurderer designforslag uten å trenge dedikerte designverktøy.
Dataformater, typer eller varianter
Åtte skjemaer er tilgjengelige: Komplementær (base + 180°), Analog (base ± 30°), Triadisk (3 farger med 120° mellomrom), Tetradisk (rektangulær 4-farge), Kvadrat (4 farger med 90° mellomrom), Splitt-komplementær (base + ±150°), Monokromatisk (samme tone med varierende lyshet 10–90%) og Nyanser (samme tone, mørk til lys). Hver farge inkluderer sine HEX-, RGB- og HSL-representasjoner sammen med en rolleetikett.
Vanlige fallgruver og kanttilfeller
Harmonier avledet fra svært umettede eller nesten gråskala grunntoner ser uatskillelige ut på tvers av skjemaer — start med en mettet grunntone. Svært mettede grunntoner kombinert med triadiske eller tetradiske skjemaer kan gi skarpe, vanskelig balanserte paletter; vurder å redusere metningen for bruk i UI. Noen kombinasjoner avledet fra harmonier oppfyller ikke WCAG-kontrast — verifiser alltid tekst-/bakgrunnspar i verktøyet for fargekontrast før lansering.
Når du bør bruke dette verktøyet vs. kode
Bruk nettleserverktøyet til idéutvikling, rask utforsking og designgjennomgang. I kode lar biblioteker som chroma.js, colord eller culori deg beregne harmonier programmatisk, integrere dem i build-pipelines for designtokens og kombinere harmonimatematikk med perseptuelt uniforme fargerom som Oklch for mer jevnt utseende paletter.