Fargepalettegenerator

Slik bruker du fargepalettegeneratoren

1. Velg en Grunnfarge med fargeprøven, eller skriv en hvilken som helst kode i Kode for grunnfargen (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), et CSS-navn …).
2. Velg en Harmoni: Komplementær, Analog, Triadisk, Delt komplementær, Tetradisk (rektangel), Kvadrat eller Monokromatisk.
3. Velg Fargehjul: HSL (klassisk) eller OKLCH (perseptuelt). Paletten oppdateres når du endrer et valg, og Generer palett oppdaterer den også.
4. Kopier én enkelt farge med Kopier-knappen under fargeprøven, eller velg et format under Eksporter som (HEX-liste, CSS-variabler, SCSS-variabler, JSON-liste eller Tailwind-farger) og bruk Kopier eller Last ned for hele paletten.

Hver fargeprøve viser HEX-koden sin i svart eller hvitt, avhengig av hva som gir best kontrast, og posisjonen i forhold til grunnfargen (for eksempel +120°).

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Fargeharmoniene

Fargeharmonier er faste vinkler på fargehjulet. Med utgangspunkt i fargetonen til grunnfargen roterer verktøyet fargetonen og beholder metningen og lysheten til grunnfargen.

• Komplementær (0°, 180°): motsatt farge. Maksimal kontrast, ypperlig for en handlingsknapp mot en hovedfarge i merkevaren.
• Analog (−60°, −30°, 0°, +30°, +60°): naboer på hjulet. Rolige, naturlige kombinasjoner som egner seg godt til bakgrunner og illustrasjoner.
• Triadisk (0°, 120°, 240°): tre jevnt fordelte fargetoner. Livlig og balansert. Vanligvis dominerer én farge, og de to andre er aksenter.
• Delt komplementær (0°, 150°, 210°): de to naboene til komplementærfargen. Sterk kontrast med mindre spenning enn et rent komplementært par.
• Tetradisk (rektangel) (0°, 60°, 180°, 240°): to komplementære par. Rike paletter som trenger én dominerende farge for å holde sammen.
• Kvadrat (0°, 90°, 180°, 270°): fire jevnt fordelte fargetoner.
• Monokromatisk: én fargetone i fem lyshetstrinn, fra mørk til lys. Ideelt for tilstander i brukergrensesnitt, diagrammer og diskrete design.

HSL- eller OKLCH-hjul?

HSL (klassisk) er det tradisjonelle hjulet som brukes av de fleste designverktøy og veiledninger. Ulempen er at like vinkler ikke ser like lyse ut: gult ved 60° ser mye lysere ut enn blått ved 240° med samme HSL-lyshet.

OKLCH (perseptuelt) roterer fargetonen i fargemodellen Oklab, som er laget slik at lysheten ser jevn ut. Paletter bygget på den har farger med lik visuell tyngde, noe som hjelper på tilgjengelig kontrast. Noen roterte farger kan havne utenfor det en skjerm kan vise. Verktøyet senker da kromaen litt, slik at de kan vises.

Slik bruker du den eksporterte paletten

CSS-variabler gir en :root-blokk med --color-1, --color-2 … som du kan lime inn i et stilark. SCSS-variabler gir linjer som $color-1: …;, JSON-liste gir en liste med HEX-strenger til skript, og Tailwind-farger gir et colors-objekt med nøklene 100, 200, 300 … som du kan lime inn i Tailwind-konfigurasjonen din.

Før du publiserer, bør du sjekke tekstkontrasten: en harmoni garanterer behagelige fargetoner, ikke lesbar tekst. Bruk mørke eller lyse nøytrale farger til brødtekst, og spar de mettede palettfargene til aksenter, knapper og grafikk.