Generator til lysere og mørkere nuancer

Sådan bruger du generatoren til lysere og mørkere nuancer

1. Vælg en Grundfarve med farveprøven, eller skriv en værdi i Farvekode: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) eller et CSS-navn som teal.
2. Vælg et Trin: 5 %, 10 %, 20 % eller 25 %. Med 10 % får du lysere nuancer ved 10 %, 20 % … 100 % og lige så mange mørkere nuancer.
3. Vælg, hvordan du vil Bland i: OKLCH (perceptuelt) eller sRGB (klassisk). De to rækker opdateres samtidig: Lysere nuancer (blandet med hvid) og Mørkere nuancer (blandet med sort), begge med udgangspunkt i grundfarven.
4. Klik på Kopiér under en farveprøve for at kopiere dens HEX-kode.
5. Under Eksportér som vælger du CSS-variabler, Tailwind-konfiguration (v3), Tailwind @theme (v4), SCSS-variabler eller JSON, angiver et Navn som primary eller brand og klikker derefter på Kopiér eller Download for koden.

Alt foregår i din browser. Intet, du indtaster, sendes til en server.

Lysere nuancer, mørkere nuancer og toner

I farvelæren er en tint en farve blandet med hvid, en shade en farve blandet med sort, og en tone en farve blandet med grå. Procenten angiver, hvor meget hvid eller sort der er tilføjet: en tint på 30 % er 70 % grundfarve og 30 % hvid. Ved 100 % når du ren hvid eller ren sort, og derfor er den sidste farveprøve i hver række altid #FFFFFF eller #000000. Den markerer skalaens ende.

Lysere og mørkere nuancer er den hurtigste vej til en sammenhængende skala ud fra én virksomhedsfarve: lyse baggrunde og svævetilstande fra de lysere nuancer, kanter, trykkede tilstande og mørk tekst fra de mørkere.

OKLCH- eller sRGB-blanding?

sRGB (klassisk) blander værdierne for rød, grøn og blå direkte. Det er det, de fleste ældre generatorer gør, og det svarer til CSS color-mix(in srgb, …). Formlen for en lysere nuance er blot kanal + (255 − kanal) × p, og for en mørkere kanal × (1 − p). Det er forudsigeligt, men trinene er ikke perceptuelt jævne: blå farver har en tendens til at glide mod lilla, når de bliver lysere, og mørke nuancer ser ofte mudrede ud.

OKLCH (perceptuelt) blander i farverummet OKLCH, som Björn Ottosson udviklede i 2020, ligesom CSS color-mix(in oklch, …). Lysstyrke, kroma og farvetone interpoleres hver for sig. Hvid og sort har ingen farvetone, så grundens farvetone bevares hele vejen, og hvert trin ændrer lysstyrken med en visuelt tilsvarende størrelse. Farver, der ville falde uden for sRGB-farverummet, bringes tilbage ved at sænke kromaen i stedet for at klippe kanaler, så farvetonen forbliver stabil. Til designsystemer giver det som regel renere og jævnere skalaer.

Brug af eksporten

• CSS-variabler giver en :root-blok som --primary-tint-20 og --primary-shade-40, klar til at blive indsat i et stylesheet.
• Tailwind-konfiguration (v3) giver et colors-objekt til theme.extend.colors. Du skriver derefter klasser som bg-primary-tint-20 eller text-primary-shade-60. DEFAULT rummer grundfarven, så bg-primary virker også.
• Tailwind @theme (v4) giver --color-…-variabler til den CSS-baserede konfiguration i Tailwind 4.
• SCSS-variabler og JSON passer til andre byggeværktøjer og designtokens.

Navne omskrives til små bogstaver, og mellemrum bliver til bindestreger, så »Brand Blue« bliver til brand-blue.