Fargepalettgenerator

Lag harmoniske paletter basert på fargelære — komplementære, triadiske, analoge og mer

Dele:
Click any color swatch to copy its hex code
Copied!

Hvorfor bruke en fargepalettgenerator?

Å velge harmoniske farger krever kunnskap om fargelære. Generatoren vår bruker HSL-matematikk for automatisk å beregne harmoniske paletter fra en hvilken som helst grunnfarge, slik at designere og utviklere kan lage profesjonelle fargeskjemaer på sekunder.

🎨

6 harmonimodi

Komplementær, triadisk, analog, delt komplementær, tetradisk, monokromatiske nyanser

👁️

Fargeprøveforhåndsvisning

Klikk på en fargeprøve for å kopiere hex-koden rett til utklippstavlen

📋

Eksporter CSS-variabler

Eksporter hele paletten som egendefinerte CSS-egenskaper — lim bare inn i stilarket

Lag en palett i 3 trinn

1

Velg grunnfargen

Bruk fargevelgeren eller skriv inn en hex-kode for å angi merkevare- eller startfargen

2

Velg harmonitypen

Velg komplementær, triadisk, analog eller annen harmoni som passer designet ditt

3

Kopier og bruk

Klikk på en fargeprøve for å kopiere hex-koden, eller kopier hele paletten med 'Kopier som CSS-variabler'

Bruksområder for fargepaletter

🌐

Webbdesign

Lag et komplett fargesystem for et nettsted basert på merkevarens primærfarge

🏢

Merkeidentitet

Utvikle en profesjonell merkepalett med primær-, sekundær- og aksentfarger

📱

UI/UX-design

Lag tilgjengelige, visuelt konsekvente farger for appens knapper, tekst og bakgrunner

📊

Datavisualisering

Generer distinkte kategorifarger for diagrammer, tabeller og analysedashboard

Beste praksis for fargedesign

✓ Kontroller fargekontrast (WCAG)

Sørg for at tekst/bakgrunn-par oppfyller WCAG AA-kontrastratioen (4,5:1 for normal tekst).

✓ Begrens paletten

Hold deg til 3-5 farger: 1 primær, 1 sekundær, 1-2 aksent, nøytrale. For mange farger skaper visuell støy.

✓ Ta hensyn til fargepsykologi

Blå=tillit/profesjonalitet, grønn=vekst/suksess, rød=hastverk/energi, gul=optimisme.

✓ Test i mørk modus

Juster lyshetsverdier for å lage mørk modus-varianter. Et rent svart (#000) eller hvitt (#fff) er ofte ikke ideelt.

❓ Ofte stilte spørsmål

Hva er et komplementært fargeskjema?
Komplementære farger er rett overfor hverandre på fargehjulet (blå og oransje, rød og grønn osv.). Det skaper høy kontrast og visuell energi — ideelt for CTA-knapper og aksentelementer.
Når bør jeg bruke et analogt fargeskjema?
Analoge skjemaer bruker 3 tilstøtende farger på fargehjulet. Det skaper et harmonisk og rolig design med lav kontrast — ideelt for bakgrunner, gradienter og myke UI-design.
Hva er forskjellen mellom HSL, RGB og Hex?
Alle tre representerer den samme fargen i ulike formater. Hex (#6366f1) brukes i CSS. RGB (99, 102, 241) angir rød/grønn/blå. HSL (237°, 84%, 67%) bruker fargetone, metning og lyshet.
Hvordan lager man en fargepalett for mørk modus?
I mørk modus senk lyshetsverdiene markant (f.eks. L:60% → L:30%) og bytt roller for tekst/bakgrunn. Behold lignende fargetone og metning, juster lyshet for lesbarhet mot mørk bakgrunn.