🌗 Ein Toolkit,
jede Designaufgabe

Tints-&-Shades-Generator

Erzeugen Sie eine vollständige Tint-&-Shade-Skala aus jeder Farbe – 20 Stufen mit HEX- und SCSS-Export.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🌗 Tints-&-Shades-Generator

Tints-&-Shades-Anleitung

Ein Tint hellt eine Farbe durch Mischen mit Weiß auf; ein Shade dunkelt sie durch Mischen mit Schwarz ab. Zusammen bilden sie die Skala, die jedes Designsystem für Hintergründe, Rahmen und Texthierarchie braucht.

Grundfarbe und Stufenzahl festlegen, dann beliebige Farbfläche anklicken, um den HEX zu kopieren. Der SCSS-Export erstellt Variablen für die ganze Palette auf einmal.

Pro Tips

Frequently Asked Questions

Q: Was ist der Unterschied zwischen Tint und Shade?
Was ist der Unterschied zwischen Tint und Shade? Ein Tint fügt der Grundfarbe Weiß hinzu (heller), ein Shade Schwarz (dunkler). Beide behalten denselben Farbton.
Q: Wie viele Stufen sollte ich verwenden?
Wie viele Stufen sollte ich verwenden? 5–10 Stufen pro Seite decken die meisten Anforderungen ab; insgesamt 20 Stufen sind ideal für Diagramme und Datenvisualisierung.
Q: Wie nutze ich den SCSS-Export?
Wie nutze ich den SCSS-Export? Kopieren Sie den Block in Ihre .scss-Datei und referenzieren Sie Variablen wie $tint-2 oder $shade-1 in den Styles.
Q: Was ist die 60-30-10-Regel?
Was ist die 60-30-10-Regel? 60 % neutrale Farbe, 30 % sekundäre, 10 % Akzent — Ihre Grundfarbe übernimmt meist die 10 % Akzentrolle.
Q: Kann ich eine einzelne Farbe kopieren?
Kann ich eine einzelne Farbe kopieren? Ja — klicken Sie auf eine beliebige Farbfläche im Raster oder Streifen, und der HEX wird sofort kopiert.

Bauhaus-Farben

Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.

Bauhaus Rot #BE1E2D

Das ikonische Rot der Bauhaus-Plakate und Drucksachen

Bauhaus Gelb #FFDE17

Das leuchtende Gelb der Bauhaus-Ästhetik

Bauhaus Blau #00509E

Das tiefe Blau des Bauhaus-Farbkreises

Ultramarin #120A8F

Historisches Pigment aus Lapislazuli, von Goethe beschrieben

Ocker #C78B2C

Erdpigment der deutschen Renaissance-Malerei

Petrol #006D7C

Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs

Lindgrün #7CBA3D

Das frische Grün der Frühlingslinden

Ziegelrot #B22222

Die roten Ziegeldächer der Altstädte

Graphit #38383A

Der dunkle Grauton der Zeichenkunst und des Industriedesigns

Weiß #F4F4F4

Das Weiß der Bauhaus-Wände — Raum und Licht

Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.