CSS-Farbvariablen

Aus einer Farbe CSS-Variablen mit hellen und dunklen Abstufungen erzeugen.

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ähle eine Grundfarbe.
Daraus erzeugt das Tool CSS-Variablen, Aufhellungen, Abdunklungen und Tokens.
Sieh dir die Farbskala in der Vorschau an.
Kopiere die CSS-Variablen in dein Stylesheet.

Wofür man es nutzt

Eine Farbskala für ein Designsystem aufbauen.
Aus einer Markenfarbe hellere und dunklere Töne erzeugen.
CSS-Variablen erzeugen, die du direkt einfügen kannst.

Gut zu wissen

Die Abstufungen werden per Algorithmus berechnet. Einzelne Stufen kann eine Designerin oder ein Designer trotzdem nachjustieren, damit sie gleichmäßig wirken.
Das Tool erzeugt Farb-Tokens. Tokens für Layout und Abstände gehören nicht dazu.

Häufige Fragen

Was entsteht aus einer einzigen Farbe?

Ein Satz CSS-Variablen mit helleren und dunkleren Tönen (eine Farbskala), den du als Design-Tokens direkt in ein Stylesheet übernehmen kannst.

Sind die Abstufungen für das Auge gleichmäßig?

Sie folgen einem einheitlichen Helligkeitsverlauf. Das ist ein guter Startpunkt. Brauchst du für deine Marke exakte Werte, passe einzelne Stufen von Hand an.

Wird etwas hochgeladen?

Nein. Alles wird lokal in deinem Browser erzeugt.

CSS-Farbvariablen

Farbskala (50 → 900)

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Was entsteht aus einer einzigen Farbe?

Sind die Abstufungen für das Auge gleichmäßig?

Wird etwas hochgeladen?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Was entsteht aus einer einzigen Farbe?

Sind die Abstufungen für das Auge gleichmäßig?

Wird etwas hochgeladen?