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

#fff6ff

50profil →

mot vit 1.06
mot svart 19.88

#ffdffd

100profil →

mot vit 1.22
mot svart 17.23

#ffc1f9

200profil →

mot vit 1.47
mot svart 14.25

#ffa0f4

300profil →

mot vit 1.81
mot svart 11.59

#ff75ec

400profil →

mot vit 2.33
mot svart 9.01

källsteg#f439dd

500profil →

mot vit 3.24
mot svart 6.48

#e400cd

600profil →

mot vit 4.05
mot svart 5.18

#cc00b7

700profil →

mot vit 4.94
mot svart 4.25

#ae009d

800profil →

mot vit 6.39
mot svart 3.29

#8d007f

900profil →

mot vit 8.61
mot svart 2.44

#66005c

950profil →

mot vit 12.21
mot svart 1.72

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff6ff",
        100: "#ffdffd",
        200: "#ffc1f9",
        300: "#ffa0f4",
        400: "#ff75ec",
        500: "#f439dd",
        600: "#e400cd",
        700: "#cc00b7",
        800: "#ae009d",
        900: "#8d007f",
        950: "#66005c",
        },
      },
    },
  },
};

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: "#fff6ff", 100: "#ffdffd", 200: "#ffc1f9", 300: "#ffa0f4", 400: "#ff75ec", 500: "#f439dd", 600: "#e400cd", 700: "#cc00b7", 800: "#ae009d", 900: "#8d007f", 950: "#66005c", }, }, }, }, };

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.