Schaalgenerator

Verander elke kleur in een 11-staps ontwerpschaal (50→950): perceptueel gelijkmatige OKLCH-interpolatie met de brondanker op de dichtstbijzijnde stap, WCAG-contrast ten opzichte van wit/zwart op elke stap, éénkliksexport naar Tailwind / CSS-variabelen / SCSS / JSON.

#--11 stap

#fff6ff

50profiel →

vs wit 1.06
vs zwart 19.88

#ffdffd

100profiel →

vs wit 1.22
vs zwart 17.23

#ffc1f9

200profiel →

vs wit 1.47
vs zwart 14.25

#ffa0f4

300profiel →

vs wit 1.81
vs zwart 11.59

#ff75ec

400profiel →

vs wit 2.33
vs zwart 9.01

brondstap#f439dd

500profiel →

vs wit 3.24
vs zwart 6.48

#e400cd

600profiel →

vs wit 4.05
vs zwart 5.18

#cc00b7

700profiel →

vs wit 4.94
vs zwart 4.25

#ae009d

800profiel →

vs wit 6.39
vs zwart 3.29

#8d007f

900profiel →

vs wit 8.61
vs zwart 2.44

#66005c

950profiel →

vs wit 12.21
vs zwart 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",
        },
      },
    },
  },
};

Hoe de schaduwgenerator werkt - invoeren, controleren, exporteren.

Genereer een 11-traps schaal voor ontwerpsystemen vanuit één kleur, perceptueel uniform in OKLCH.

01
Invoeren
Plak een HEX, of klik op "Build scale" op een willekeurige kleurpagina om de waarde binnen te halen.
02
Controleren
Uw kleur wordt afgerond naar de dichtstbijzijnde stap; WCAG-contrast ten opzichte van wit en zwart wordt onder elke stap weergegeven.
03
Exporteren
Kies Tailwind / CSS-variabelen / SCSS / JSON en kopieer het rechtstreeks in uw code.

Veelgestelde vragen over de schaduwgenerator

Vier vragen die mensen daadwerkelijk stellen over schaduwgeneratie.

Waarom 11 stappen?: 50-950 verdeeld over 11 stappen komt overeen met de schalen die worden gebruikt door gangbare ontwerpsystemen (Tailwind, Radix), dus het kost niets om ze te vervangen.
Zal de tint verschuiven?: Nee. Interpolatie vindt plaats in OKLCH, waarbij uw kleur is verankerd aan de dichtstbijzijnde stap, zodat de tint behouden blijft van 50 tot 950.
Kan ik de schaal commercieel gebruiken?: Ja. Een schaduwschaal is een berekend getal zonder licentie - wat u exporteert, is van u.
Waarom zijn sommige stappen grijsachtig?: Kleuren met hoge chroma vallen buiten sRGB aan de uitersten; de engine comprimeert chroma daar, zodat stappen levend blijven in plaats van grijs of neon te worden.

Na het behalen van het resultaat

Ga verder vanaf hier en breng de kleuren in praktijk.

Standaardmatch

Voer een RAL-, Pantone- of NCS-code in — of een willekeurige HEX — en match deze in alle 10 standaardsystemen met CIEDE2000 ΔE.

Contrastcontroleur

WCAG 2.1 contrastvalidatie tussen elke voorgrond- en achtergrondkleur.

Paletbord

Spatiebalk om te randomiseren, vergrendelen, slepen om opnieuw te ordenen, delen via URL — alles wat een paletbord zou moeten doen.

AI Paletstudio

Beschrijf een scène of stemming in één zin — ontvang een palet met vijf rollen met onderbouwing.

// 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", }, }, }, }, };

Hoe de schaduwgenerator werkt - invoeren, controleren, exporteren.

Genereer een 11-traps schaal voor ontwerpsystemen vanuit één kleur, perceptueel uniform in OKLCH.

Invoeren

Plak een HEX, of klik op "Build scale" op een willekeurige kleurpagina om de waarde binnen te halen.

Controleren

Uw kleur wordt afgerond naar de dichtstbijzijnde stap; WCAG-contrast ten opzichte van wit en zwart wordt onder elke stap weergegeven.

Exporteren

Kies Tailwind / CSS-variabelen / SCSS / JSON en kopieer het rechtstreeks in uw code.

Veelgestelde vragen over de schaduwgenerator

Vier vragen die mensen daadwerkelijk stellen over schaduwgeneratie.

Waarom 11 stappen?

50-950 verdeeld over 11 stappen komt overeen met de schalen die worden gebruikt door gangbare ontwerpsystemen (Tailwind, Radix), dus het kost niets om ze te vervangen.

Zal de tint verschuiven?

Nee. Interpolatie vindt plaats in OKLCH, waarbij uw kleur is verankerd aan de dichtstbijzijnde stap, zodat de tint behouden blijft van 50 tot 950.

Kan ik de schaal commercieel gebruiken?

Ja. Een schaduwschaal is een berekend getal zonder licentie - wat u exporteert, is van u.

Waarom zijn sommige stappen grijsachtig?

Kleuren met hoge chroma vallen buiten sRGB aan de uitersten; de engine comprimeert chroma daar, zodat stappen levend blijven in plaats van grijs of neon te worden.