Hvilken harmoni skal jeg velge?

Rask veiledning: komplementær = høyest kontrast og fokus (bra for CTA-knapper), analog = rolig og naturlig (bra for merkevareidentitet), triadisk = livlig og balansert (bra for barnesider, apper), tetradisk = variert og krevende (bra for utformere som vet hva de gjør), monokromatisk = elegant og konsistent (bra for minimalistiske design).

Er fargene tilgjengelighets-godkjent (WCAG)?

Ikke automatisk. Verktøyet genererer estetisk sammenhengende farger, men kontrast mellom tekst og bakgrunn må testes separat mot WCAG-krav (4.5:1 for vanlig tekst, 3:1 for stor tekst). Bruk et kontrast-verktøy som WebAIM Contrast Checker etter at du har valgt to farger du vil kombinere.

Kan jeg låse én farge og la resten oppdateres?

I nåværende versjon er basefargen driver for hele paletten, andre farger beregnes ut fra denne. For «lock and shuffle»-mønsteret må du bytte basen manuelt til den farge du liker, og se hvordan de andre endrer seg. Full fargelås er planlagt.

Fungerer harmoniene i alle fargerom?

Beregningen skjer i HSL, som er intuitiv men ikke perceptuelt uniform, sagt annerledes, samme grad-rotasjon gir ikke alltid samme opplevde forskjell. Nyere modeller som OKLCH gir bedre resultater for pro-designere, men HSL fungerer godt for de fleste web-tema-behov.

Palett-hjelper | Verktøy

Slik fungerer det

Velg en grunnfarge, så bygges en harmonisk palett ut fra fargehjulet. Analog gir naborfarger som passer rolig sammen, komplementær gir sterk kontrast, og monokrom gir nyanser av samme farge. Perfekt for å sette farger på en nettside raskt.

Om dette verktøyet

Palett-verktøyet genererer en fullstendig fargepalett fra én valgt basefarge, med fem klassiske fargeharmonier: komplementær (180° på fargesirkelen), analog (fem nyanser med ±30°/±15° spredning), triadisk (tre farger 120° fra hverandre), tetradisk (fire farger 90° fra hverandre) og monokromatisk (fem lyshetsvarianter av samme kulør). Perfekt som utgangspunkt for logo-design, nettside-tema, moodboard, plakat eller merkevare-manual. Alle farger vises som klikkbare svatsjer med HEX-verdi, ett klikk kopierer koden til utklippstavlen. Du kan også eksportere hele paletten som CSS-variabler klar for lim-inn i stilarket ditt.

Slik bruker du det

Velg en basefarge med fargevelgeren, eller lim inn en HEX-kode direkte.
Se de fem harmoniene beregnet automatisk under.
Klikk en svats for å kopiere HEX-verdien til utklippstavlen.
Trykk «Kopier alle som CSS-variabler» for å eksportere hele paletten.

Eksempler

Merkevarepalett fra logofarge

InnBase: #2563EB (blå). Bruker triadisk harmoni.

Får #2563EB (primær), #EB2563 (magenta, aksent), #63EB25 (grønn, sekundær). Kombinasjon egner seg til data-visualisering og call-to-action-knapper.

Triadisk gir høyt kontrast og livlig følelse. For rolig, profesjonell stil, prøv analog eller monokromatisk i stedet.

Dark-mode tema fra én farge

InnBase: #14B8A6 (teal). Bruker monokromatisk harmoni.

Ut5 varianter fra lys til mørk: #ECFEFA, #99F6E4, #14B8A6, #0F766E, #042F2C. Egner seg til UI-lag i mørk modus.

Monokromatisk gir en «pen» konsistent følelse. Bruk lyseste variant som bakgrunn i lys modus, mørkeste som tekstfarge i mørk modus.

Vanlige bruksområder

Merkevare-utvikling: bygge sekundær- og aksentfarger fra logo.
Nettside-tema: definere primær, sekundær, aksent og bakgrunn.
Data-visualisering: velge en serie kategorifarger som ser bra ut sammen.
Grafisk design: plakater, presentasjoner og infografikk med gjennomtenkt fargesetting.
Interiør og mote: finne komplementære farger til en gitt kulør.

Ofte stilte spørsmål

Hvilken harmoni skal jeg velge?: Rask veiledning: komplementær = høyest kontrast og fokus (bra for CTA-knapper), analog = rolig og naturlig (bra for merkevareidentitet), triadisk = livlig og balansert (bra for barnesider, apper), tetradisk = variert og krevende (bra for utformere som vet hva de gjør), monokromatisk = elegant og konsistent (bra for minimalistiske design).
Er fargene tilgjengelighets-godkjent (WCAG)?: Ikke automatisk. Verktøyet genererer estetisk sammenhengende farger, men kontrast mellom tekst og bakgrunn må testes separat mot WCAG-krav (4.5:1 for vanlig tekst, 3:1 for stor tekst). Bruk et kontrast-verktøy som WebAIM Contrast Checker etter at du har valgt to farger du vil kombinere.
Kan jeg låse én farge og la resten oppdateres?: I nåværende versjon er basefargen driver for hele paletten, andre farger beregnes ut fra denne. For «lock and shuffle»-mønsteret må du bytte basen manuelt til den farge du liker, og se hvordan de andre endrer seg. Full fargelås er planlagt.
Fungerer harmoniene i alle fargerom?: Beregningen skjer i HSL, som er intuitiv men ikke perceptuelt uniform, sagt annerledes, samme grad-rotasjon gir ikke alltid samme opplevde forskjell. Nyere modeller som OKLCH gir bedre resultater for pro-designere, men HSL fungerer godt for de fleste web-tema-behov.

Teknisk bakgrunn

Beregningen: HEX konverteres til HSL. Harmoniene er ren H-rotasjon (S og L bevares): komplementær = H + 180°, triadisk = H, H+120, H+240, tetradisk = H, H+90, H+180, H+270, analog = H-30, H-15, H, H+15, H+30. Monokromatisk holder H og S konstant og genererer L-verdier {95%, 75%, opprinnelig, 25%, 10%} for lys-til-mørk-serie. Alle verdier konverteres tilbake til HEX for visning. Copy-til-utklippstavle bruker `navigator.clipboard.writeText`. CSS-eksport genererer `--color-primary: #...; --color-primary-light: #...;` osv. Ingen ekstern avhengighet ut over standard nettleser-API-er.