Generator för ljusare och mörkare nyanser

Så använder du generatorn för ljusare och mörkare nyanser

1. Välj en Basfärg med färgrutan, eller skriv ett värde i Färgkod: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) eller ett CSS-namn som teal.
2. Välj ett Steg: 5 %, 10 %, 20 % eller 25 %. Med 10 % får du ljusare nyanser på 10 %, 20 % … 100 % och lika många mörkare nyanser.
3. Välj hur du vill Blanda i: OKLCH (perceptuellt) eller sRGB (klassiskt). De två raderna uppdateras direkt: Ljusare nyanser (blandat med vitt) och Mörkare nyanser (blandat med svart), som båda utgår från basfärgen.
4. Klicka på Kopiera under valfri färgruta för att kopiera dess HEX-kod.
5. Under Exportera som väljer du CSS-variabler, Tailwind-konfiguration (v3), Tailwind @theme (v4), SCSS-variabler eller JSON, anger ett Namn som primary eller brand och klickar sedan på Kopiera eller Ladda ner.

Tints, shades och toner

I färglära är en tint (ljusare nyans) en färg blandad med vitt, en shade (mörkare nyans) en färg blandad med svart och en ton en färg blandad med grått. Procentsatsen anger hur mycket vitt eller svart som tillsätts: en ljusare nyans på 30 % består av 70 % basfärg och 30 % vitt. Vid 100 % når du rent vitt eller rent svart, och därför är den sista färgrutan i varje rad alltid #FFFFFF eller #000000; den markerar skalans slut.

Ljusare och mörkare nyanser är det snabbaste sättet att bygga en enhetlig skala från en enda profilfärg: ljusa bakgrunder och hovringslägen från de ljusare nyanserna, ramar, nedtryckta lägen och mörk text från de mörkare.

Blanda i OKLCH eller sRGB?

sRGB (klassiskt) blandar värdena för rött, grönt och blått direkt. Det är vad de flesta äldre generatorer gör, och det motsvarar CSS color-mix(in srgb, …). Formeln för en ljusare nyans är helt enkelt channel + (255 − channel) × p, och för en mörkare channel × (1 − p). Det är förutsägbart, men stegen är inte perceptuellt jämna: blå toner tenderar att dra mot lila när de ljusnar, och mörka nyanser ser ofta grumliga ut.

OKLCH (perceptuellt) blandar i färgrymden OKLCH som Björn Ottosson utformade 2020, precis som CSS color-mix(in oklch, …). Ljushet, kroma och nyans interpoleras var för sig. Vitt och svart saknar nyans, så basnyansen behålls hela vägen, och varje steg ändrar ljusheten med en visuellt likartad mängd. Färger som skulle hamna utanför sRGB-omfånget förs tillbaka genom att kroman minskas, inte genom att kanalerna klipps, så nyansen förblir stabil. För designsystem ger det oftast renare och jämnare skalor.

Använda exporten

• CSS-variabler ger ett :root-block med till exempel --primary-tint-20 och --primary-shade-40, redo att klistra in i en stilmall.
• Tailwind-konfiguration (v3) ger ett colors-objekt för theme.extend.colors; sedan skriver du klasser som bg-primary-tint-20 eller text-primary-shade-60. DEFAULT innehåller basfärgen, så bg-primary fungerar också.
• Tailwind @theme (v4) ger --color-…-variabler för den CSS-baserade konfigurationen i Tailwind 4.
• SCSS-variabler och JSON passar andra byggverktyg och designtokens.

Namnen skrivs med gemener och mellanslag blir bindestreck, så ”Brand Blue” blir brand-blue.