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

#ffedfa

50profil →

mot vit 1.12
mot svart 18.75

#ffd8f4

100profil →

mot vit 1.28
mot svart 16.38

#ffbdec

200profil →

mot vit 1.53
mot svart 13.74

källsteg#fea4e4

300profil →

mot vit 1.80
mot svart 11.64

#f47bd4

400profil →

mot vit 2.43
mot svart 8.63

#e653c4

500profil →

mot vit 3.28
mot svart 6.40

#d222af

600profil →

mot vit 4.58
mot svart 4.59

#b90098

700profil →

mot vit 5.97
mot svart 3.52

#9c007f

800profil →

mot vit 7.72
mot svart 2.72

#7c0063

900profil →

mot vit 10.31
mot svart 2.04

#560044

950profil →

mot vit 14.20
mot svart 1.48

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#ffedfa",
        100: "#ffd8f4",
        200: "#ffbdec",
        300: "#fea4e4",
        400: "#f47bd4",
        500: "#e653c4",
        600: "#d222af",
        700: "#b90098",
        800: "#9c007f",
        900: "#7c0063",
        950: "#560044",
        },
      },
    },
  },
};

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: "#ffedfa", 100: "#ffd8f4", 200: "#ffbdec", 300: "#fea4e4", 400: "#f47bd4", 500: "#e653c4", 600: "#d222af", 700: "#b90098", 800: "#9c007f", 900: "#7c0063", 950: "#560044", }, }, }, }, };

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.