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.
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#fff4ff",
100: "#ffddff",
200: "#ffc1fe",
300: "#fda1fb",
400: "#f679f5",
500: "#e849e9",
600: "#d500d9",
700: "#bd00c2",
800: "#a100a7",
900: "#810088",
950: "#5c0062",
},
},
},
},
};Erstelle eine 11-stufige Design-Skala aus einer Farbe, wahrnehmungsgleichmäßig in OKLCH.
Füge einen HEX-Wert ein oder klicke auf „Scale erstellen“ auf einer beliebigen Farbseite, um den Wert zu übernehmen.
Deine Farbe springt zum nächsten Schritt; der WCAG-Kontrast zu Weiß und Schwarz wird unter jedem Schritt angezeigt.
Wähle Tailwind / CSS-Variablen / SCSS / JSON aus und kopiere es direkt in deinen Code.
Vier Fragen, die Nutzer tatsächlich zur Farbton-Generierung stellen.
Machen Sie weiter und setzen Sie die Farben ein.
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.
WCAG 2.1-Kontrastprüfung zwischen beliebigen Vordergrund- und Hintergrundfarben.
Leertaste zum Zufallsgenerieren, Sperren, Ziehen zum Neuordnen, Teilen per URL – alles, was ein Paletten-Board können sollte.
Beschreiben Sie eine Szene oder Stimmung in einem Satz – erhalten Sie eine Fünf-Rollen-Palette mit Begründung.