Skala-Generator

Wandle jede Farbe in eine 11-stufige Design-System-Skala um (50→950): wahrnehmungsgleichmäßige OKLCH-Interpolation mit der Quellfarbe, die am nächsten Schritt verankert ist, WCAG-Kontrast zu Weiß/Schwarz bei jedem Schritt, Ein-Klick-Export nach Tailwind / CSS-Variablen / SCSS / JSON.

#--11 Schritt

#fff5ff

50Profil →

vs Weiß 1.06
vs Schwarz 19.76

#ffdffe

100Profil →

vs Weiß 1.22
vs Schwarz 17.24

#ffc2fb

200Profil →

vs Weiß 1.46
vs Schwarz 14.36

#ffa0f7

300Profil →

vs Weiß 1.81
vs Schwarz 11.62

#ff75ef

400Profil →

vs Weiß 2.32
vs Schwarz 9.04

Quellschritt#f436e1

500Profil →

vs Weiß 3.25
vs Schwarz 6.46

#e400d2

600Profil →

vs Weiß 4.02
vs Schwarz 5.23

#cc00bc

700Profil →

vs Weiß 4.89
vs Schwarz 4.29

#ae00a1

800Profil →

vs Weiß 6.34
vs Schwarz 3.31

#8d0083

900Profil →

vs Weiß 8.54
vs Schwarz 2.46

#66005f

950Profil →

vs Weiß 12.14
vs Schwarz 1.73

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff5ff",
        100: "#ffdffe",
        200: "#ffc2fb",
        300: "#ffa0f7",
        400: "#ff75ef",
        500: "#f436e1",
        600: "#e400d2",
        700: "#cc00bc",
        800: "#ae00a1",
        900: "#8d0083",
        950: "#66005f",
        },
      },
    },
  },
};

Wie der Farbton-Generator funktioniert – eingeben, prüfen, exportieren.

Erstelle eine 11-stufige Design-Skala aus einer Farbe, wahrnehmungsgleichmäßig in OKLCH.

01
Eingeben
Füge einen HEX-Wert ein oder klicke auf „Scale erstellen“ auf einer beliebigen Farbseite, um den Wert zu übernehmen.
02
Prüfen
Deine Farbe springt zum nächsten Schritt; der WCAG-Kontrast zu Weiß und Schwarz wird unter jedem Schritt angezeigt.
03
Exportieren
Wähle Tailwind / CSS-Variablen / SCSS / JSON aus und kopiere es direkt in deinen Code.

FAQ zum Farbton-Generator

Vier Fragen, die Nutzer tatsächlich zur Farbton-Generierung stellen.

Warum 11 Schritte?: 50–950 über 11 Stufen entspricht den Skalen gängiger Designsysteme (Tailwind, Radix), sodass der Austausch keine Kosten verursacht.
Wird der Farbton driftet?: Nein. Die Interpolation läuft in OKLCH, wobei deine Farbe am nächsten Schritt verankert ist, sodass der Farbton von 50 bis 950 erhalten bleibt.
Kann ich die Skala kommerziell nutzen?: Ja. Eine Farbton-Skala ist ein berechneter Wert ohne Lizenzbindung – was du exportierst, gehört dir.
Warum sind manche Schritte gräulich?: Farben mit hohem Chroma fallen an den Extremen aus dem sRGB-Bereich; der Motor komprimiert das Chroma dort, sodass die Schritte lebendig bleiben, statt grau oder neon zu werden.

Nachdem Sie das Ergebnis erhalten haben

Machen Sie weiter und setzen Sie die Farben ein.

Standard-Übereinstimmung

Geben Sie einen RAL-, Pantone- oder NCS-Code – oder einen beliebigen HEX – ein und stimmen Sie ihn über alle 10 Standardsysteme mit CIEDE2000 ΔE ab.

Kontrastprüfer

WCAG 2.1-Kontrastprüfung zwischen beliebigen Vordergrund- und Hintergrundfarben.

Paletten-Board

Leertaste zum Zufallsgenerieren, Sperren, Ziehen zum Neuordnen, Teilen per URL – alles, was ein Paletten-Board können sollte.

KI-Paletten-Studio

Beschreiben Sie eine Szene oder Stimmung in einem Satz – erhalten Sie eine Fünf-Rollen-Palette mit Begründung.

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff5ff", 100: "#ffdffe", 200: "#ffc2fb", 300: "#ffa0f7", 400: "#ff75ef", 500: "#f436e1", 600: "#e400d2", 700: "#cc00bc", 800: "#ae00a1", 900: "#8d0083", 950: "#66005f", }, }, }, }, };

Wie der Farbton-Generator funktioniert – eingeben, prüfen, exportieren.

Erstelle eine 11-stufige Design-Skala aus einer Farbe, wahrnehmungsgleichmäßig in OKLCH.

Eingeben

Füge einen HEX-Wert ein oder klicke auf „Scale erstellen“ auf einer beliebigen Farbseite, um den Wert zu übernehmen.

Prüfen

Deine Farbe springt zum nächsten Schritt; der WCAG-Kontrast zu Weiß und Schwarz wird unter jedem Schritt angezeigt.

Exportieren

Wähle Tailwind / CSS-Variablen / SCSS / JSON aus und kopiere es direkt in deinen Code.

FAQ zum Farbton-Generator

Vier Fragen, die Nutzer tatsächlich zur Farbton-Generierung stellen.

Warum 11 Schritte?

50–950 über 11 Stufen entspricht den Skalen gängiger Designsysteme (Tailwind, Radix), sodass der Austausch keine Kosten verursacht.

Wird der Farbton driftet?

Nein. Die Interpolation läuft in OKLCH, wobei deine Farbe am nächsten Schritt verankert ist, sodass der Farbton von 50 bis 950 erhalten bleibt.

Kann ich die Skala kommerziell nutzen?

Ja. Eine Farbton-Skala ist ein berechneter Wert ohne Lizenzbindung – was du exportierst, gehört dir.

Warum sind manche Schritte gräulich?

Farben mit hohem Chroma fallen an den Extremen aus dem sRGB-Bereich; der Motor komprimiert das Chroma dort, sodass die Schritte lebendig bleiben, statt grau oder neon zu werden.