Generator for lysere og mørkere farger

Slik bruker du generatoren for lysere og mørkere farger

1. Velg en Grunnfarge med fargeprøven, eller skriv en verdi i Fargekode: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) eller et CSS-navn som teal.
2. Velg et Trinn: 5 %, 10 %, 20 % eller 25 %. Med 10 % får du lysere nyanser ved 10 %, 20 % … 100 % og like mange mørkere nyanser.
3. Velg hvordan du vil Bland i: OKLCH (perseptuelt) eller sRGB (klassisk). De to radene oppdateres samtidig: Lysere nyanser (blandet med hvitt) og Mørkere nyanser (blandet med svart), begge med grunnfargen som utgangspunkt.
4. Klikk på Kopier under en fargeprøve for å kopiere HEX-koden.
5. Under Eksporter som velger du CSS-variabler, Tailwind-konfigurasjon (v3), Tailwind @theme (v4), SCSS-variabler eller JSON, setter et Navn som primary eller brand, og bruker deretter Kopier eller Last ned for koden.

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

Tints, shades og toner

I fargelæren er en tint (lysere nyanse) en farge blandet med hvitt, en shade (mørkere nyanse) en farge blandet med svart, og en tone en farge blandet med grått. Prosenten sier hvor mye hvitt eller svart som er lagt til: en tint på 30 % er 70 % grunnfarge og 30 % hvitt. Ved 100 % er du framme ved rent hvitt eller rent svart, og derfor er den siste fargeprøven i hver rad alltid #FFFFFF eller #000000. Den markerer slutten av skalaen.

Lysere og mørkere nyanser er den raskeste måten å bygge en helhetlig skala fra én merkevarefarge: lyse bakgrunner og hover-tilstander fra de lysere nyansene, kanter, trykkede tilstander og mørk tekst fra de mørkere.

OKLCH- eller sRGB-blanding?

sRGB (klassisk) blander røde, grønne og blå verdier direkte. Det er det de fleste eldre generatorer gjør, og det tilsvarer CSS color-mix(in srgb, …). Formelen for en lysere nyanse er rett og slett kanal + (255 − kanal) × p, og for en mørkere kanal × (1 − p). Det er forutsigbart, men trinnene er ikke perseptuelt jevne: blått har en tendens til å drive mot lilla når det blir lysere, og mørke nyanser ser ofte gjørmete ut.

OKLCH (perseptuelt) blander i fargerommet OKLCH, laget av Björn Ottosson i 2020, som CSS color-mix(in oklch, …). Lyshet, kroma og fargetone interpoleres hver for seg. Hvitt og svart har ingen fargetone, så grunnens fargetone beholdes hele veien, og hvert trinn endrer lysheten med et visuelt sett like stort beløp. Farger som ellers ville havnet utenfor sRGB-området, hentes tilbake ved å redusere kromaen, ikke ved å kutte kanaler, så fargetonen holder seg stabil. For designsystemer gir dette som regel renere og jevnere skalaer.

Slik bruker du eksporten

• CSS-variabler gir en :root-blokk som --primary-tint-20 og --primary-shade-40, klar til å limes inn i et stilark.
• Tailwind-konfigurasjon (v3) gir et colors-objekt for theme.extend.colors. Du skriver da klasser som bg-primary-tint-20 eller text-primary-shade-60. DEFAULT inneholder grunnfargen, så bg-primary fungerer også.
• Tailwind @theme (v4) gir --color-…-variabler for den CSS-baserte konfigurasjonen i Tailwind 4.
• SCSS-variabler og JSON passer til andre byggeverktøy og designtokens.

Navn skrives med små bokstaver, og mellomrom blir til bindestreker, så «Brand Blue» blir brand-blue.