ZenovayTools

Farbtöne & Schattierungen Generator

Erzeugen Sie Farbtöne (heller) und Schattierungen (dunkler) aus einer beliebigen HEX-Farbe. Zeigen Sie Farbfelder in der Vorschau an und kopieren Sie HEX-Codes für Ihr Design-System.

Tints (lighter →)

Tint 1#eff0fe
Tint 2#e0e0fc
Tint 3#d0d1fb
Tint 4#c1c2f9
Tint 5#b1b3f8
Tint 6#a1a3f7
Tint 7#9294f5
Tint 8#8285f4
Tint 9#7375f2

Base

Base#6366f1

(← darker) Shades

Shade 1#595cd9
Shade 2#4f52c1
Shade 3#4547a9
Shade 4#3b3d91
Shade 5#323379
Shade 6#282960
Shade 7#1e1f48
Shade 8#141430
Shade 9#0a0a18

Full scale (click to copy)

So verwenden Sie Farbtöne & Schattierungen Generator

  1. 1Geben Sie eine HEX-Farbe ein oder wählen Sie eine mit dem Farbwähler.
  2. 2Wählen Sie die Anzahl der zu generierenden Farbtöne und Schattierungen.
  3. 3Zeigen Sie eine Vorschau der Farbfelder von hell bis dunkel an.
  4. 4Klicken Sie auf ein Farbfeld, um seinen HEX-Code zu kopieren.
ZenovayAnalytics

Machen Sie aus Besuchern Kunden.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.

Häufig gestellte Fragen

Was ist der Unterschied zwischen einem Tint und einem Shade?▾
Ein Tint entsteht durch Hinzufügen von Weiß zu einer Farbe, wodurch sie heller wird. Ein Shade entsteht durch Hinzufügen von Schwarz, wodurch sie dunkler wird. Ein Tone entsteht durch Hinzufügen von Grau. Im digitalen Design werden Tints und Shades verwendet, um kohärente Farbskalen für UI-Komponenten zu erstellen – hellere Tints für Hintergründe, mittlere Töne für Schaltflächen und interaktive Elemente, dunklere Shades für Text und Rahmen. Designsysteme wie Tailwind CSS verwenden 10-stufige Skalen (50, 100, 200, ... 900).
Wie werden die Tints und Shades berechnet?▾
Dieser Generator verwendet lineare Interpolation zwischen der Basisfarbe und Weiß (für Tints) oder Schwarz (für Shades). Jeder Schritt mischt die Basisfarbe mit Weiß oder Schwarz zu einem gleichen Prozentsatz. Zum Beispiel mit 9 Schritten: Tint 1 ist 10 % Basis + 90 % Weiß, Tint 5 ist 50/50, Tint 9 ist 90 % Basis + 10 % Weiß. Dies erzeugt perceptuell konsistente Schritte im sRGB-Farbraum.
Wie verwende ich diese Farben in CSS?▾
Sie können die Hex-Codes direkt in CSS einfügen oder als CSS-Custom-Properties definieren: --color-100: #f5f3ff; --color-500: #7c3aed; --color-900: #1e0a4b; usw. Dann referenzieren Sie sie mit var(--color-500). Für Tailwind CSS können Sie die generierte Skala in Ihrer tailwind.config.js unter theme.colors hinzufügen. Für Design-Tokens exportieren Sie als JSON-Objekt zur Verwendung in Figma, Storybook oder Design-Token-Tools.
Sollte ich HSL statt RGB für Farbskalen verwenden?▾
HSL (Farbton, Sättigung, Helligkeit) wird oft für die Generierung perceptuell einheitlicher Skalen bevorzugt. Die Anpassung der Helligkeit in HSL bei konstantem Farbton und Sättigung erzeugt konsistent aussehende Farben. sRGB-Interpolation (was dieses Tool verwendet) ist jedoch einfacher und liefert vorhersehbare Ergebnisse für UI-Design. Für fortgeschrittenere perceptuelle Farbräume erwägen Sie OKLCH oder LCH, die in modernem CSS unterstützt werden.
Wie exportiere ich diese Farben nach Figma?▾
In Figma können Sie eine Farbbibliothek erstellen, indem Sie einen Frame mit Rechtecken für jedes Farbmuster erstellen und die Hex-Werte als Beschriftungen hinzufügen. Dann mit Rechtsklick → Komponente erstellen für jedes, und in Ihrer Team-Bibliothek veröffentlichen. Alternativ verwenden Sie den „CSS Variables"-Export und fügen ihn in ein Figma-Plugin wie Design Tokens oder Token Studio ein. Kopieren Sie die generierten CSS-Variablen aus diesem Tool und fügen Sie sie direkt in das Plugin ein.