a11y.skipToMainContent
1

Farbtongenerator

Geben Sie eine beliebige Hex-Farbe ein und erzeugen Sie sofort 10 Farbtöne (50-950) im Tailwind-CSS-Stil - anzeigen Sie Swatches, klicken Sie zum Kopieren und Exportieren von Konfigurationen.

Was this tool helpful?
Send Image to:
Advertisement

How to use Color Shades Generator

  1. Geben Sie eine Hexfarbe ein oder verwenden Sie den Farbwähler.
  2. Sehen Sie sich die generierte 10-Shade-Skala von 50 bis 950 an.
  3. Klicken Sie auf einzelne Bildfelder, um Hexcodes zu kopieren, oder verwenden Sie die Exportschaltflächen für eine vollständige Konfiguration.

Was ist Farbschattierungs-Generator?

Das Erstellen konsistenter Farbskalen ist für Designsysteme unerlässlich. Dieses Tool nimmt jede Basis-Hex-Farbe an und erzeugt einen vollständigen Satz von 10 Schattierungen von 50 (am leichtesten) bis 950 (dunkel) nach der Tailwind CSS-Farbskalakonvention.

Jeder Farbton wird als Farbfeld mit seinem Hex-Code angezeigt. Klicken Sie auf ein beliebiges Swatch, um das Hex in Ihre Zwischenablage zu kopieren. Exportieren Sie die gesamte Palette als hex-Werte, benutzerdefinierte CSS-Eigenschaften oder ein gebrauchsfertiges Tailwind-CSS-Konfigurationsobjekt.

Advertisement

FAQ

Wie werden die Schattierungen berechnet?
Schattierungen werden berechnet, indem die Grundfarbe mit Weiß (für hellere Schattierungen 50-400) und Schwarz (für dunklere Schattierungen 600-950) mit perzeptuell ausgeglichener Interpolation gemischt wird.
Kann ich das für mein Designsystem verwenden?
Ja - der Export der Tailwind-Konfiguration ist bereit, sich in Ihren Rückenwind einzufügen. config.js für kundenspezifische Markenfarben.

Related tools

Author

AR
Aisha Rahmani"The Visual Storyteller"

Design Technologist & Media Specialist

Aisha bridges the gap between pixels and code. With expertise in image processing, SVG optimization, and video compression, she helps creators, designers, and marketers prepare media that looks great and loads fast. She has spoken at design conferences about accessible visual content and has helped agencies reduce page-weight budgets by up to 60 percent without sacrificing creative quality.

📖 Color Shades Generator on Wikipedia·Image Tools on Wikipedia·Color Shades Generator on Britannica

People also use

← Back to Image Tools · All tags
Advertisement