Tints und Shades: Farbskalen erstellen für Design-Systeme

Erzeuge systematische Farbpaletten — von 50 bis 900 — die konsistente, barrierefreie Design-Systeme antreiben.

6 Min. Lesezeit Farbe · CSS · Design 6 Abschnitte + FAQ

Jedes ausgereifte Design-System — Tailwind, Material Design, Chakra UI — verwendet eine systematische Farbskala statt einer Handvoll handgepickter Farben. Diese Skalen ermöglichen es Designern und Entwicklern, den richtigen Helligkeitsgrad für jeden Kontext zu wählen.

Ein Tint fügt Weiß zu einer Basisfarbe hinzu und macht sie heller. Ein Shade fügt Schwarz hinzu und macht sie dunkler. Der mathematische Ansatz nutzt das HSL-Farbmodell, um die Helligkeit anzupassen und dabei Farbton und Sättigung beizubehalten.

Was sind Tints und Shades

In der Farbtheorie ist ein Tint eine mit Weiß gemischte Farbe, die eine hellere Version erzeugt. Ein Shade ist eine mit Schwarz gemischte Farbe, die eine dunklere Version erzeugt. Im digitalen Design erzeugen Tint-und-Shade-Generatoren typischerweise eine Helligkeitsreihe von fast Weiß bis fast Schwarz, alle mit demselben Farbton.

Kostenloses Tool Tint & Shade Generator Erzeuge eine vollständige 50–900 Farbskala aus jeder Grundfarbe

HSL-Farbmodell für die Manipulation

HSL (Farbton, Sättigung, Helligkeit) ist das bevorzugte Modell für die Erzeugung von Tints und Shades, da Helligkeit eine unabhängige Achse ist. Um einen Tint zu erstellen, erhöhe L bei konstantem H und S. Um einen Shade zu erstellen, verringere L.

Eine 9-stufige Skala erstellen (100-900)

Die Standard-Design-System-Skala reicht von 50 (fast weiß) über 100, 200, 300, 400, 500 (Basisfarbe), 600, 700, 800, 900 (fast schwarz). Die Basisfarbe ist bei 500 verankert. Schritte 100-400 sind Tints mit steigender Helligkeit. Schritte 600-900 sind Shades mit sinkender Helligkeit.

Kostenloses Tool Farbpaletten-Generator Erzeuge harmonische Paletten aus jeder Grundfarbe

Barrierefreiheitsaspekte

Beim Erstellen einer Farbskala für ein Design-System musst du WCAG-Kontrastverhältnisse auf jeder Stufe überprüfen, die du für Text verwenden möchtest. Skalenstufe 700 auf weißem Hintergrund erreicht typischerweise 4,5:1 (AA-Konformität). Stufe 900 erreicht 7:1+ (AAA).

Tailwind und Material Design Paletten

Tailwind CSS verwendet eine 50-900-Skala für alle integrierten Farben. Material Design 3 nutzt einen anderen Ansatz und generiert ein vollständiges Farbschema aus einer einzigen "Seed-Farbe" mit dem HCT-Farbraum.

CSS-Custom-Properties

Exportiere deine Farbskala als CSS-Custom-Properties für einfache Verwendung in einem Projekt. Definiere sie auf :root-Ebene. Benenne sie semantisch: --color-blue-500, --color-blue-600.

Kostenloses Tool Farbkontrast-Prüfer Prüfe WCAG-Kontrastverhältnisse zwischen zwei Farben

Häufig gestellte Fragen

Was ist der Unterschied zwischen Tint und Shade? +
Ein Tint ist eine mit Weiß gemischte Farbe (heller). Ein Shade ist eine mit Schwarz gemischte Farbe (dunkler). In digitalen Farbskalen werden beide durch Anpassung des Helligkeitswerts in HSL erzeugt.
Warum HSL statt RGB für Tint/Shade-Generierung verwenden? +
RGB hat keine dedizierte Helligkeitsachse. Der Helligkeitsparameter in HSL steuert direkt die Helligkeit ohne den Farbton zu beeinflussen.
Wie viele Stufen sollte eine Design-System-Farbskala haben? +
Der Industriestandard sind 9-11 Stufen (50, 100-900). Dies bietet genug Granularität für Text, Hintergründe, Rahmen und interaktive Zustände.
Was ist die Basisfarbe in einer Farbskala? +
Die Basisfarbe wird typischerweise auf Stufe 500 platziert. Sie ist die Farbe wie ursprünglich definiert — weder aufgehellt noch abgedunkelt.
Wie stelle ich Barrierefreiheit in meiner Farbskala sicher? +
Überprüfe WCAG-Kontrastverhältnisse zwischen deinen Skalenstufen und den Hintergründen, auf denen sie verwendet werden. Texte bei Stufe 700+ sollten mindestens 4,5:1 erreichen.
Kann ich OKLCH statt HSL für Farbskalen verwenden? +
Ja, und OKLCH erzeugt wahrnehmungsmäßig gleichmäßigere Stufen. OKLCH wird jetzt in CSS unterstützt.
Wie generiert Tailwind CSS seine Farbpalette? +
Tailwinds integrierte Farben werden vom Tailwind-Team handgefertigt. Für benutzerdefinierte Tailwind-Farben kannst du einen Tint/Shade-Generator verwenden.