Farbe zu CSS-Variablen

CSS-Variablen, Schattierungen und Tokens aus jeder Farbe.

Basisfarbe

Farbskala (50 → 900)

eff0fe

100

e0e0fc

200

c1c2f9

300

a1a3f7

400

8285f4

500

6366f1

600

4f52c1

700

3b3d91

800

282960

900

141430

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

Generiertes CSS

:root {
  --color-50: #eff0fe;
  --color-100: #e0e0fc;
  --color-200: #c1c2f9;
  --color-300: #a1a3f7;
  --color-400: #8285f4;
  --color-500: #6366f1;
  --color-600: #4f52c1;
  --color-700: #3b3d91;
  --color-800: #282960;
  --color-900: #141430;
  --color: #6366f1;
}

So funktioniert es

Wählen Sie eine Basisfarbe.
Das Tool erzeugt daraus CSS Custom Properties, Aufhellungen, Abdunklungen und Tokens.
Sehen Sie die Skala der Abstufungen in der Vorschau.
Kopieren Sie die CSS-Variablen in Ihr Stylesheet.

Wofür man es nutzt

Eine Farbskala für ein Designsystem aufbauen.
Aufhellungen und Abdunklungen aus einer Markenfarbe erzeugen.
Einsatzbereite CSS Custom Properties erzeugen.

Gut zu wissen

Die Abstufungen werden algorithmisch erzeugt; ein Designer justiert womöglich einzelne Stufen für perzeptuelle Gleichmäßigkeit noch nach.
Es erzeugt Farb-Tokens, Layout- und Abstands-Tokens sind außerhalb des Umfangs.

Häufige Fragen

Was erzeugt es aus einer Farbe?

Einen Satz CSS Custom Properties plus Aufhellungen und Abdunklungen (eine Farbskala), bereit zum Einfügen in ein Stylesheet als Design-Tokens.

Sind die Abstufungen perzeptuell gleichmäßig?

Sie folgen einem konsistenten Helligkeitsalgorithmus, was ein starker Ausgangspunkt ist; justieren Sie einzelne Stufen nach, wenn Ihre Marke exakte Werte benötigt.

Wird irgendetwas hochgeladen?

Nein. Alles wird lokal in Ihrem Browser erzeugt.

Farbe zu CSS-Variablen

Farbskala (50 → 900)

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Was erzeugt es aus einer Farbe?

Sind die Abstufungen perzeptuell gleichmäßig?

Wird irgendetwas hochgeladen?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Was erzeugt es aus einer Farbe?

Sind die Abstufungen perzeptuell gleichmäßig?

Wird irgendetwas hochgeladen?