Farbton- und Schattenregler
Generiere automatisch die hellsten Farbtöne und dunkelsten Schatten jeder Farbe mit ihrem HEX-Code.
Wie man Farbtöne und Schatten einer Farbe generiert
Wählen Sie eine Grundfarbe
Wählen Sie die Ausgangsfarbe mit dem visuellen Farbwähler oder geben Sie ihren HEX-Code ein.
Konsultieren Sie die Töne und Schatten
Sie sehen automatisch 5 hellere Töne (Tinte) und 5 dunklere Töne (Schatten), die aus Ihrer Farbe generiert werden.
Kopiere den HEX-Code, den du benötigst
Klicke auf einen beliebigen Farbmuster, um seinen HEX-Code in die Zwischenablage zu kopieren.
Häufig gestellte Fragen zum Farbton- und Schattenregler
Hellere und dunklere Varianten einer Farbe sind unverzichtbar, um ein kohärentes Design-Farbschema zu erstellen (z. B. für Hover-Zustände, Hintergründe oder Rahmen). Dieses Tool berechnet sie automatisch.
Was ist der Unterschied zwischen einem Tint und einem Shade?
+
Ein Ton wird durch Mischen der Farbe mit Weiß (Aufhellen) erreicht, und ein Schatten durch Mischen mit Schwarz (Verdunkeln).
Wie viele Varianten werden generiert?
+
Es werden 5 hellere Töne und 5 dunklere Schatten aus deiner Basisfarbe generiert, insgesamt 10.
Kann ich die Codes kopieren?
+
Ja, klicke auf eine beliebige Farbe in der Liste, um ihren HEX-Code zu kopieren.
Kann ich damit eine Tailwind-ähnliche Design-Palette erstellen?
+
Ja, es ist exakt das gleiche Konzept wie die Farbskalen von 50–900, die viele Design-Systeme verwenden.
Ist es kostenlos?
+
Ja, dieses Tool ist vollständig kostenlos.
Wird meine Farbe auf einen Server hochgeladen?
+
Nein, alle Berechnungen werden direkt in deinem Browser durchgeführt.
Farben
Farbkonverter (HEX, RGB, HSL, CMYK)
Konvertiert beliebige Farben zwischen HEX, RGB, HSL und CMYK sofort mit Livevorschau und dem nächsten Farbnamen.
Farbpaletten-Generator
Erstellen Sie harmonische 5-Farben-Paletten (komplementär, analog, triadisch oder monochromatisch) basierend auf einer Grundfarbe.
CSS-Gradient-Generator
Erstelle lineare oder radiale Farbverläufe mit bis zu 4 Farben und kopiere den einsatzbereiten CSS-Code.
WCAG-Kontrastprüfer
Überprüfe, ob die Farbkombination aus Text und Hintergrund die Barrierefreiheitsstufen AA und AAA erfüllt.
Zufällige Farbe
Generiere eine zufällige Farbe mit einem Klick und entdecke ihren Namen, ihren HEX-/RGB-/HSL-Code und ähnliche Farben.
Farbpicker (Pipette)
Wähle jede Farbe von deinem Bildschirm mit dem Browser-Pipettenwerkzeug oder nutze den klassischen Farbwähler.
Farbenblindheitssimulator
Laden Sie ein Bild hoch und sehen Sie, wie es Menschen mit Protanopie, Deuteranopie oder Tritanopie wahrnehmen würden.
Mesh-Farbverlauf-Generator
Erstelle Hintergründe mit Mesh-Farbverläufen (verschwommene Farbflecken) und lade sie als PNG herunter oder kopiere den CSS-Code.
Farbmischer
Mische zwei Farben und entdecke die Zwischentöne Schritt für Schritt mit ihrem HEX-Code.
Farbrad (Harmonien)
Wählen Sie eine Farbe auf dem Rad und entdecken Sie ihre harmonischen Kombinationen: Komplementär-, Analog-, Triadische und mehr.
Farbpaletten-Extraktor aus Bild
Laden Sie ein Bild hoch und extrahieren Sie automatisch die dominantesten Farben in einer Palette mit HEX-Code für jede Farbe.
Durchschnittliche Farbe eines Bildes
Laden Sie ein Bild hoch und berechnen Sie sofort seine Durchschnittsfarbe mit HEX-, RGB- und HSL-Code.
Erkunde Farben nach Familie
Über 469 benannte Farben mit ihren HEX-, RGB-, HSL- und CMYK-Codes, organisiert in 12 Farbfamilien.
