Skala-generator

Omvandla vilken färg som helst till en 11-stegs designsystem-skala (50→950): perceptuellt jämn OKLCH-interpolation med källfärgen förankrad vid närmaste steg, WCAG-kontrast mot vit/svart på varje steg, export med ett klick till Tailwind / CSS-variabler / SCSS / JSON.

#--11 steg

#fff3ff

50profil →

mot vit 1.08
mot svart 19.52

#ffddfe

100profil →

mot vit 1.23
mot svart 17.03

#ffc0fb

200profil →

mot vit 1.48
mot svart 14.18

#fea1f7

300profil →

mot vit 1.80
mot svart 11.66

#f67aef

400profil →

mot vit 2.35
mot svart 8.95

källsteg#e84ce2

500profil →

mot vit 3.20
mot svart 6.56

#d600d1

600profil →

mot vit 4.39
mot svart 4.78

#bd00bb

700profil →

mot vit 5.41
mot svart 3.88

#a000a0

800profil →

mot vit 6.99
mot svart 3.00

#810081

900profil →

mot vit 9.33
mot svart 2.25

#5b005c

950profil →

mot vit 13.13
mot svart 1.60

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff3ff",
        100: "#ffddfe",
        200: "#ffc0fb",
        300: "#fea1f7",
        400: "#f67aef",
        500: "#e84ce2",
        600: "#d600d1",
        700: "#bd00bb",
        800: "#a000a0",
        900: "#810081",
        950: "#5b005c",
        },
      },
    },
  },
};

Hur nyansgeneratorn fungerar – ange, kontrollera, exportera.

Skapa en 11-stegs skala för designsystem från en färg, perceptuellt enhetlig i OKLCH.

01
Ange
Klistra in en HEX-kod, eller tryck på "Skapa skala" på valfri färg sida för att hämta värdet.
02
Kontrollera
Din färg justeras till närmaste steg; WCAG-kontrast mot vit och svart visas under varje steg.
03
Exportera
Välj Tailwind / CSS-variabler / SCSS / JSON och kopiera det direkt till din kod.

Vanliga frågor om nyansgeneratorn

Fyra frågor som folk faktiskt ställer om nyansgenerering.

Varför 11 steg?: 50-950 fördelat på 11 steg matchar skalorna som används av vanliga designsystem (Tailwind, Radix), så det kostar inget att byta in det.
Kommer nyansen att skifta?: Nej. Interpoleringen sker i OKLCH med din färg förankrad till dess närmaste steg, så nyansen bibehålls från 50 till 950.
Kan jag använda skalan kommersiellt?: Ja. En nyansskala är beräknade siffror utan licens – det du exporterar är ditt.
Varför blir vissa steg gråaktiga?: Färger med hög kromaticitet hamnar utanför sRGB vid ytterligheterna; motorn komprimerar kromaticiteten där så att stegen förblir livfulla istället för att bli grå eller neonfärgade.

Efter att du fått resultatet

Fortsätt härifrån och använd färgerna i praktiken.

Standardmatchning

Ange en RAL-, Pantone- eller NCS-kod – eller valfri HEX – och matcha den över alla 10 standardsystem med CIEDE2000 ΔE.

Kontrastkontroll

WCAG 2.1 kontrastvalidering mellan valfri förgrunds- och bakgrundsfärg.

Palettpanel

Mellanslag för att slumpa, låsa, dra för att omordna, dela via URL – allt en palettpanel ska göra.

AI Palettstudio

Beskriv en scen eller stämning på en rad – få en fem-rolls palett med motivering.

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff3ff", 100: "#ffddfe", 200: "#ffc0fb", 300: "#fea1f7", 400: "#f67aef", 500: "#e84ce2", 600: "#d600d1", 700: "#bd00bb", 800: "#a000a0", 900: "#810081", 950: "#5b005c", }, }, }, }, };

Hur nyansgeneratorn fungerar – ange, kontrollera, exportera.

Skapa en 11-stegs skala för designsystem från en färg, perceptuellt enhetlig i OKLCH.

Ange

Klistra in en HEX-kod, eller tryck på "Skapa skala" på valfri färg sida för att hämta värdet.

Kontrollera

Din färg justeras till närmaste steg; WCAG-kontrast mot vit och svart visas under varje steg.

Exportera

Välj Tailwind / CSS-variabler / SCSS / JSON och kopiera det direkt till din kod.

Vanliga frågor om nyansgeneratorn

Fyra frågor som folk faktiskt ställer om nyansgenerering.

Varför 11 steg?

50-950 fördelat på 11 steg matchar skalorna som används av vanliga designsystem (Tailwind, Radix), så det kostar inget att byta in det.

Kommer nyansen att skifta?

Nej. Interpoleringen sker i OKLCH med din färg förankrad till dess närmaste steg, så nyansen bibehålls från 50 till 950.

Kan jag använda skalan kommersiellt?

Ja. En nyansskala är beräknade siffror utan licens – det du exporterar är ditt.

Varför blir vissa steg gråaktiga?

Färger med hög kromaticitet hamnar utanför sRGB vid ytterligheterna; motorn komprimerar kromaticiteten där så att stegen förblir livfulla istället för att bli grå eller neonfärgade.