Sprache:Deutsch
Chromoforge

Generator für CSS-Farbvariablen

Starte mit einer Farbe und erhalte einen fertigen :root-Block. Er enthält die Grundfarbe, eine lesbare Textfarbe und elf primäre Abstufungen.

CSS erzeugen

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

HEX, RGB, HSL oder OKLCH verwenden. OKLCH akzeptiert numerische oder prozentuale Helligkeit/Chroma und Winkeleinheiten. Nur deckende Farben; Werte außerhalb von sRGB werden mit Hinweis begrenzt.

Gewählte Farbe#E24B4AText auf dieser Farbe: #111111

Farbskala 50–950

:root {
  --brand: #E24B4A;
  --on-brand: #111111;
  --primary-50: #FFEEEC;
  --primary-100: #FFDDD8;
  --primary-200: #FFBCB5;
  --primary-300: #F5918A;
  --primary-400: #E24B4A;
  --primary-500: #C1282F;
  --primary-600: #9A000A;
  --primary-700: #7B0000;
  --primary-800: #5C0000;
  --primary-900: #410000;
  --primary-950: #2E0000;
}
Diese Farbe umrechnenText und Hintergrund prüfen

Von einer Farbe zu CSS-Tokens

  1. Gib eine HEX-, RGB-, HSL- oder OKLCH-Farbe ein oder nutze die Farbauswahl. Das Ergebnis erscheint auf dieser Seite.
  2. Kopiere den gesamten :root-Block oder lade eine CSS-Datei herunter. Einzelne Farbstufen lassen sich ebenfalls kopieren.
  3. Nutze var(--brand), var(--on-brand) und var(--primary-50) bis var(--primary-950) in deinem Stylesheet.

Rollen vor der Verwendung prüfen

Die Originalfarbe bleibt an der nächstliegenden Position der Skala erhalten. Die Stufennummern sind Bezeichnungen, keine Kontrastgarantie. --on-brand wird nur für deckenden Text auf --brand gewählt; prüfe andere Paare getrennt. Für weitere Harmonien und Exportformate kannst du das Hauptwerkzeug öffnen.

Mit deiner Farbe weiterarbeiten

Farbschattierungen GeneratorGeneriere eine 50-950 Skala aus einer Basisfarbe für UI Flächen, Borders, Hover und Dark Mode.Farbkonverter: HEX, RGB, HSL und OKLCHWandle HEX, RGB, HSL oder OKLCH direkt in HEX, RGB, HSL und OKLCH um. Kopiere ein Format oder eine CSS-Variable. Kostenlos, lokal und ohne Konto.WCAG-KontrastprüferPrüfe Text- und Hintergrundkontraste nach WCAG AA und AAA, teste echte Farbpaare und wähle lesbare Kombinationen.