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

#fff7fe

50profil →

mot vit 1.05
mot svart 19.99

#fee3f8

100profil →

mot vit 1.20
mot svart 17.56

#fbcaf0

200profil →

mot vit 1.42
mot svart 14.81

#f5aee8

300profil →

mot vit 1.74
mot svart 12.10

källsteg#ea89da

400profil →

mot vit 2.31
mot svart 9.09

#dd6acc

500profil →

mot vit 3.00
mot svart 7.01

#ca45b8

600profil →

mot vit 4.15
mot svart 5.05

#b21ca2

700profil →

mot vit 5.86
mot svart 3.58

#970088

800profil →

mot vit 7.86
mot svart 2.67

#79006d

900profil →

mot vit 10.33
mot svart 2.03

#56004d

950profil →

mot vit 13.97
mot svart 1.50

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff7fe",
        100: "#fee3f8",
        200: "#fbcaf0",
        300: "#f5aee8",
        400: "#ea89da",
        500: "#dd6acc",
        600: "#ca45b8",
        700: "#b21ca2",
        800: "#970088",
        900: "#79006d",
        950: "#56004d",
        },
      },
    },
  },
};

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: "#fff7fe", 100: "#fee3f8", 200: "#fbcaf0", 300: "#f5aee8", 400: "#ea89da", 500: "#dd6acc", 600: "#ca45b8", 700: "#b21ca2", 800: "#970088", 900: "#79006d", 950: "#56004d", }, }, }, }, };

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.