Semantische UI-Farbpalette

Geben Sie eine Markenfarbe ein, erhalten Sie Primär-/Sekundär-/Erfolgs-/Warn-/Gefahrfarben — exportiert als Tailwind-Konfiguration und CSS-Variablen.

Marken-Primärfarbe

2F6FED · L 57%

Primär

Automatisch abgeleitet, Markenhelligkeit und -chroma bleiben erhalten

#010101Basis

#010101Hell

#000101Dunkel

Sekundär

Automatisch abgeleitet, Markenhelligkeit und -chroma bleiben erhalten

#010101Basis

#010101Hell

#010101Dunkel

Erfolg

Automatisch abgeleitet, Markenhelligkeit und -chroma bleiben erhalten

#000101Basis

#010101Hell

#000100Dunkel

Warnung

Automatisch abgeleitet, Markenhelligkeit und -chroma bleiben erhalten

#010100Basis

#010101Hell

#010100Dunkel

Gefahr

Automatisch abgeleitet, Markenhelligkeit und -chroma bleiben erhalten

#010101Basis

#010101Hell

#010000Dunkel

Code exportieren

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      primary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#000101",
        foreground: "#ffffff",
      },
      secondary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010101",
        foreground: "#ffffff",
      },
      success: {
        DEFAULT: "#000101",
        light: "#010101",
        dark: "#000100",
        foreground: "#ffffff",
      },
      warning: {
        DEFAULT: "#010100",
        light: "#010101",
        dark: "#010100",
        foreground: "#ffffff",
      },
      danger: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010000",
        foreground: "#ffffff",
      },
      },
    },
  },
};

Wie man ein semantisches System aufbaut – eine Primärfarbe, fünf Rollen.

Geben Sie eine Markenfarbe ein, erhalten Sie die fünf semantischen Sätze, die jede Oberfläche benötigt, exportiert als Code.

01
Primärfarbe eingeben
Fügen Sie Ihre Marken-HEX ein; semantische Farben übernehmen deren Helligkeits- und Chrominanzcharakter.
02
Die Rollen lesen
Erfolg liegt im grünen Farbtonbereich, Warnung in Bernstein, Gefahr in Rot – der Farbton ist semantisch, der Charakter bleibt markenkonform.
03
Exportieren
Kopieren als Tailwind-Konfiguration / CSS-Variablen / JSON, direkt in Ihr Designsystem.

FAQ zur semantischen Palette

Drei häufige Fragen bei der Integration in ein Designsystem.

Sind semantische Farbtöne festgelegt?: Farbtöne verankern sich an semantische Bereiche (Erfolg=Grün, Warnung=Bernstein, Gefahr=Rot), während Helligkeit und Chroma von der Markenprimärfarbe erben – jede Marke entwickelt ihren eigenen Charakter.
Warum drei Schritte pro semantischer Farbe?: Base für den Standardzustand, light für Hover/Töne, dark für Aktivierung/Ränder; die Textfarbe wird automatisch schwarz oder weiß nach Kontrast ausgewählt.
Ist der exportierte Code produktionsbereit?: Der Tailwind-Block kann direkt in tailwind.config eingefügt werden; der CSS-Variablen-Block funktioniert mit jedem Framework oder einfachem CSS.

Nach der semantischen Palette

Öffnen Sie den Board-Editor und testen Sie es als echte Oberfläche.

OKLCH-Editor

Passen Sie L / C / H im wahrnehmungsgleichmäßigen OKLCH-Raum an mit Live-Vorschau und Ausgabe als oklch() / HEX / RGB.

Skala-Generator

Jede Farbe in eine 11-stufige Designsystem-Skala, wahrnehmungsgleichmäßig in OKLCH, WCAG-Kontrast pro Stufe, Export nach Tailwind/CSS/SCSS/JSON.

Kontrastprüfer

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

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 module.exports = { theme: { extend: { colors: { primary: { DEFAULT: "#010101", light: "#010101", dark: "#000101", foreground: "#ffffff", }, secondary: { DEFAULT: "#010101", light: "#010101", dark: "#010101", foreground: "#ffffff", }, success: { DEFAULT: "#000101", light: "#010101", dark: "#000100", foreground: "#ffffff", }, warning: { DEFAULT: "#010100", light: "#010101", dark: "#010100", foreground: "#ffffff", }, danger: { DEFAULT: "#010101", light: "#010101", dark: "#010000", foreground: "#ffffff", }, }, }, }, };

Wie man ein semantisches System aufbaut – eine Primärfarbe, fünf Rollen.

Geben Sie eine Markenfarbe ein, erhalten Sie die fünf semantischen Sätze, die jede Oberfläche benötigt, exportiert als Code.

Primärfarbe eingeben

Fügen Sie Ihre Marken-HEX ein; semantische Farben übernehmen deren Helligkeits- und Chrominanzcharakter.

Die Rollen lesen

Erfolg liegt im grünen Farbtonbereich, Warnung in Bernstein, Gefahr in Rot – der Farbton ist semantisch, der Charakter bleibt markenkonform.

Exportieren

Kopieren als Tailwind-Konfiguration / CSS-Variablen / JSON, direkt in Ihr Designsystem.

FAQ zur semantischen Palette

Drei häufige Fragen bei der Integration in ein Designsystem.

Sind semantische Farbtöne festgelegt?

Farbtöne verankern sich an semantische Bereiche (Erfolg=Grün, Warnung=Bernstein, Gefahr=Rot), während Helligkeit und Chroma von der Markenprimärfarbe erben – jede Marke entwickelt ihren eigenen Charakter.

Warum drei Schritte pro semantischer Farbe?

Base für den Standardzustand, light für Hover/Töne, dark für Aktivierung/Ränder; die Textfarbe wird automatisch schwarz oder weiß nach Kontrast ausgewählt.

Ist der exportierte Code produktionsbereit?

Der Tailwind-Block kann direkt in tailwind.config eingefügt werden; der CSS-Variablen-Block funktioniert mit jedem Framework oder einfachem CSS.