Generator til farveharmonier

Sådan fungerer generatoren til farveharmonier

Hvad værktøjet gør

Generatoren til farveharmonier beregner matematisk relaterede farvesæt ud fra én enkelt grundtone: komplementær, analog, triadisk, tetradisk, kvadratisk, split-komplementær, monokromatisk og nuancer. Hver palet gengives med HEX-, RGB- og HSL-værdier, som du kan kopiere med et klik og bruge direkte i CSS eller design tokens.

Almindelige anvendelsestilfælde for udviklere

Designere prototyper brandpaletter ved at udforske, hvordan en brandfarvetone udvikler sig under forskellige harmoniregler. Frontend-udviklere udleder accentfarver til knapper, advarsler og badges fra en primær brandfarve. Data-viz-ingeniører vælger kategoriske farvesæt, der ser bevidste ud, men stadig kan skelnes. Produktchefer sammenligner paletmuligheder, når de gennemgår designforslag, uden at have brug for dedikerede designværktøjer.

Dataformater, typer eller varianter

Otte skemaer er tilgængelige: Komplementær (base + 180°), Analog (base ± 30°), Triadisk (3 farver med 120° mellemrum), Tetradisk (rektangulær 4-farve), Kvadratisk (4 farver med 90° mellemrum), Split-komplementær (base + ±150°), Monokromatisk (samme tone med varierende lyshed 10–90%) og Nuancer (samme tone, mørk til lys). Hver farve inkluderer sine HEX-, RGB- og HSL-repræsentationer sammen med en rollebetegnelse.

Almindelige faldgruber og kanttilfælde

Harmonier afledt af ekstremt umættede eller næsten gråskala grundfarver ser uadskillelige ud på tværs af skemaer — start med en mættet base. Meget mættede baser kombineret med triadiske eller tetradiske skemaer kan give skarpe, svære at balancere paletter; overvej at skrue ned for mætningen til UI-brug. Nogle kombinationer afledt af harmonier lever ikke op til WCAG-kontrast — verificér altid tekst-/baggrundspar i værktøjet til farvekontrast, før du lancerer.

Hvornår du skal bruge dette værktøj vs. kode

Brug browserværktøjet til idéudvikling, hurtig udforskning og designreview. I kode lader biblioteker som chroma.js, colord eller culori dig beregne harmonier programmatisk, integrere dem i build-pipelines for design tokens og kombinere harmonimatematik med perceptuelt uniforme farverum som Oklch for mere jævnt udseende paletter.