Sprache:Deutsch
Chromoforge

Tailwind-Farbpaletten-Generator

Erzeuge Primär-, Sekundär- und Neutralskalen zusammen. Kopiere @theme für Tailwind v4, eine v3-Konfiguration oder CSS.

Theme aktualisieren ↓

Website-Vorschau

Die Chroma-Reduktion erhält Helligkeit und Farbton vor der HEX-Rundung. Original bewahrt bisherige Paletten und Links.

Ergänze die Deklarationen unter den vorhandenen Imports. Behalte Konfiguration und Plugins deines Projekts bei.

Website-Vorschau
chromoforgeWebsite-Vorschau
Dein Projekt

Platz für deine nächste Idee.

Eine Beispielseite mit deinen Hintergründen, Flächen und Akzenten. Ändere die Palette, um jeden Abschnitt zu aktualisieren.

Komponenten im Kontext

PrimärSekundärNeutral

Generierte Ausgangswerte, kein Barrierefreiheitszertifikat. Prüfe Text, Hintergründe, Fokuszustände und Diagramme in deiner Oberfläche.

Statusbeispiele

  • Erfolg
  • Warnung
  • Information
Farbbeziehungen
#2563EB
#6A31C4
#D61F58
#D2D61F
#1FD66F

Beispieldiagramm, keine Analysedaten. Farbe allein macht ein Diagramm nicht zugänglich.

Exportformat
/* Tailwind CSS v4: add after your existing Tailwind import. */
@theme {
  --color-primary-50: #EAF6FF;
  --color-primary-100: #D5E9FF;
  --color-primary-200: #AFD1FF;
  --color-primary-300: #81AFFF;
  --color-primary-400: #4E86FA;
  --color-primary-500: #2563EB;
  --color-primary-600: #0038BF;
  --color-primary-700: #001D9F;
  --color-primary-800: #00007D;
  --color-primary-900: #03005F;
  --color-primary-950: #050048;
  --color-secondary-50: #F6F1FF;
  --color-secondary-100: #EAE2FF;
  --color-secondary-200: #D5C5FF;
  --color-secondary-300: #B79FFF;
  --color-secondary-400: #9570EC;
  --color-secondary-500: #6A31C4;
  --color-secondary-600: #5B19B1;
  --color-secondary-700: #460091;
  --color-secondary-800: #310071;
  --color-secondary-900: #210055;
  --color-secondary-950: #15003F;
  --color-neutral-50: #F4F5F7;
  --color-neutral-100: #E6E8EC;
  --color-neutral-200: #CDD1D8;
  --color-neutral-300: #ACB1BB;
  --color-neutral-400: #757C8A;
  --color-neutral-500: #656C7A;
  --color-neutral-600: #474D5A;
  --color-neutral-700: #323844;
  --color-neutral-800: #1F242E;
  --color-neutral-900: #10141C;
  --color-neutral-950: #060910;
}

Von der Farbe zum Code

  1. Wähle Primär-, Sekundär- und Neutralfarbe. Alle Berechnungen bleiben in diesem Browser.
  2. Prüfe beide Themes und die drei Skalen 50–950. Wähle anschließend das Exportformat.
  3. Kopiere oder lade das Ergebnis herunter. shadcn verwendet semantische Tokens, Tailwind v4 verwendet @theme.

Generierte Ausgangswerte, kein Barrierefreiheitszertifikat. Prüfe Text, Hintergründe, Fokuszustände und Diagramme in deiner Oberfläche.

Weitere Farbwerkzeuge