Farb-Schattierungs-Generator

Generiere eine vollständige 11-stufige Farbskala aus jeder Hex-Farbe. Exportiere als CSS-Variablen, Tailwind-Config, SCSS oder JSON.

:root {
  --color-brand-50: #f7f5ff;
  --color-brand-100: #ede8fe;
  --color-brand-200: #dad2fc;
  --color-brand-300: #beb3fa;
  --color-brand-400: #998ff6;
  --color-brand-500: #6366f1;
  --color-brand-600: #4e52bc;
  --color-brand-700: #3c408d;
  --color-brand-800: #2d3269;
  --color-brand-900: #21264a;
  --color-brand-950: #191f38;
}

Häufig gestellte Fragen

Was ist der Unterschied zwischen Schattierung und Tönung?

Eine Schattierung ist eine mit Schwarz gemischte Farbe (dunkler), eine Tönung ist mit Weiß gemischt (heller).

Wie verwende ich die exportierten CSS-Variablen?

Kopiere den CSS-Tab-Output und füge ihn in deine globale CSS-Datei ein. Referenziere sie mit var(--brand-500).

Ist die Skala mit Tailwind CSS kompatibel?

Ja. Wechsle zum Tailwind-Tab und kopiere das colors-Objekt in tailwind.config.js.