Wie verwende ich die exportierten CSS-Variablen?

Klicke auf „CSS exportieren", um alle 19 Farben als CSS-Custom-Properties zu kopieren. Füge sie in deinen :root-Block ein und verwende sie mit var(--color-tint-30) usw.

Tint & Shade Generator

Erstelle eine vollständige Tint-und-Shade-Skala aus jeder Grundfarbe. 9 Töne heller, 9 Töne dunkler — HEX-Codes kopieren oder als CSS-Variablen exportieren.

9 Tints · 9 ShadesCSS-Variablen ExportKopieren per Klick

① HEX-Code eingeben oder Farbe wählen ② 9 Töne & 9 Schattierungen generieren ③ Auf ein Muster klicken zum Kopieren

Grundfarbe

Brand-Vorlagen:

So funktioniert es

Gib eine beliebige HEX-Farbe ein. Das Tool erstellt 9 Tints (heller) und 9 Shades (dunkler), indem die Grundfarbe mathematisch mit Weiß und Schwarz gemischt wird. Klicke auf ein Feld, um den HEX-Code zu kopieren.

Tints

Ein Tint entsteht durch Mischung der Grundfarbe mit Weiß. Der Prozentsatz gibt an, wie viel Weiß hinzugefügt wird — 90% ist fast weiß, 10% ist kaum heller als das Original.

Shades

Ein Shade entsteht durch Mischung der Grundfarbe mit Schwarz. Der Prozentsatz gibt an, wie viel Schwarz hinzukommt — 90% ist fast schwarz, 10% ist kaum dunkler als das Original.

Tints und Shades — wie Farbskalen funktionieren

Tints: Kanal = Basis + (255 − Basis) × p. Shades: Kanal = Basis × (1 − p). Lineare RGB-Interpolation erzeugt eine 9-Tint/9-Shade-Rampe — 19 Stufen — kompatibel mit der Tailwind CSS 100–900-Skala und Material Design Tokens. Exportiere alle 19 Werte als CSS-Custom-Properties in einem :root {}-Block: --color-tint-10 bis --color-shade-90 und --color-base. Ideal für Design-System-Tokens. Überprüfe stets den Kontrast — WCAG AA erfordert 4,5:1.

Häufig gestellte Fragen

Ein Tint ist eine Farbe gemischt mit Weiß (heller). Ein Shade ist eine Farbe gemischt mit Schwarz (dunkler). Beide erhalten den ursprünglichen Farbton. Tints wirken pastellartig, Shades tiefer und gesättigter.

Das Tool verwendet lineare RGB-Interpolation. Tint bei p%: Kanal = Basis + (255 − Basis) × p. Shade bei p%: Kanal = Basis × (1 − p). Dies ergibt eine mathematisch gleichmäßige Progression.

90% Tint bedeutet 90% Weiß mit 10% Grundfarbe zu mischen. Das Ergebnis wird von Weiß dominiert. Für subtile Aufhellung solltest du 10–30%-Tints verwenden.

Design-Systeme wie Tailwind CSS und Material Design nutzen eine 9-stufige Skala: 100 ist der hellste Tint, 900 der dunkelste Shade, 500 (oder 600) ist oft die Grundfarbe. Dieses Tool erstellt 9 Stufen in jede Richtung.

Tints und Shades allein garantieren keine Barrierefreiheit. Du musst das Kontrastverhältnis prüfen (mindestens 4,5:1 für Normaltexte nach WCAG AA). Verwende das Kontrast-Tool zur Überprüfung.

Klicke auf „CSS exportieren", um alle 19 Farben als CSS-Custom-Properties zu kopieren (--color-tint-90 bis --color-shade-90 und --color-base). Füge sie in deinen :root-Block ein und verwende sie mit var(--color-tint-30) usw.

Ja — das Tool funktioniert mit jedem gültigen 6-stelligen HEX-Code (#000000 bis #FFFFFF), also allen 16+ Millionen Farben im 8-Bit-RGB-Modell. Alle Berechnungen erfolgen sofort im Browser ohne Datenübertragung.

Tints und Shades — wie Farbskalen funktionieren

Häufig gestellte Fragen

Unser Netzwerk entdecken