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: "#fff3ff",
100: "#ffddfe",
200: "#ffc0fc",
300: "#fea1f8",
400: "#f679f1",
500: "#e84be4",
600: "#d600d3",
700: "#bd00bd",
800: "#a100a2",
900: "#810083",
950: "#5c005e",
},
},
},
},
};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.