Farbton-Generator
Erzeuge Farbtöne, indem du eine Farbe in gleichmäßigen Schritten mit neutralem Grau mischst. Dabei sinkt die Sättigung, während der Farbton erhalten bleibt. Gib eine Farbe in einem beliebigen CSS-Format ein, wähle 2 bis 20 Schritte und einen Mischfarbraum aus und erhalte eine Tabelle mit HEX-, RGB-, HSL- und OKLCH-Werten für jeden Farbton, beginnend mit der Originalfarbe. Nützlich für gedeckte Paletten, deaktivierte Zustände, dezente Flächen und ruhigere Markenvarianten.
Häufig gestellte Fragen
Was ist ein Farbton?
Ein Farbton entsteht, wenn eine Farbe mit Grau gemischt wird. Ihr Farbton bleibt erhalten, sie wirkt jedoch gedeckter. Eine aufgehellte Farbe wird dagegen mit Weiß gemischt, eine abgedunkelte mit Schwarz.
Welches Grau wird verwendet?
Das mittlere sRGB-Grau #808080, rgb(128 128 128). Helle Farben werden dadurch etwas dunkler und dunkle etwas heller, je näher sie diesem Grau kommen. Wenn du mit einem anderen Grau mischen möchtest, verwende den Color Mixer mit deinem eigenen Grau.
Wie sind die Schritte abgestuft?
Bei N Schritten mischt Zeile k die Farbe mit dem Anteil (k - 1) / N an Grau. Bei 10 Schritten ergeben sich also 0 %, 10 %, 20 % und so weiter bis 90 %. Die erste Zeile zeigt immer deine Originalfarbe; reines Grau ist nie Teil der Liste.
Wie unterscheidet sich ein Farbton davon, die Sättigung von HSL zu verringern?
Wenn du die Sättigung von HSL verringerst, bleibt die Helligkeit von HSL erhalten. Beim Mischen mit Grau verschiebt sich auch die Helligkeit zur Mitte hin. Farbtöne wirken daher wie durch einen Graufilter betrachtet und eignen sich für gedeckte Hintergründe und deaktivierte Zustände.
Was ist der Unterschied zwischen dem Mischen in sRGB und in OKLab?
Beim Mischen in sRGB werden die gamma-kodierten Kanalwerte gemittelt. Das ist der klassische Ansatz bei farbtonähnlichen Farbtabellen und Sass mix(). Beim Mischen in OKLab wird ein wahrnehmungsbezogener Farbraum verwendet, sodass die Chroma von Schritt zu Schritt gleichmäßiger abnimmt.
Welche Eingabeformate kann ich verwenden?
Hex-Codes mit oder ohne #, CSS-Farbnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() und cmyk(). Gib pro Durchlauf eine Farbe ein.
Wie viele Farbtöne kann ich erzeugen?
Pro Durchlauf zwischen 2 und 20, standardmäßig 10. Die Anzahl schließt die Originalfarbe in der ersten Zeile ein.
Welche Werte zeigt die Tabelle?
Für jeden Schritt werden der Grauanteil, der Hex-Code, rgb(), hsl() und oklch() in moderner CSS-Syntax angezeigt. RGB-Kanäle sind ganze Zahlen, HSL-Prozentwerte haben bis zu zwei Dezimalstellen und die Helligkeit sowie Chroma in OKLCH bis zu vier.
Was passiert mit transparenten Farben und Farben mit großem Farbumfang?
Der Alpha-Wert der Eingabe bleibt für jeden Farbton erhalten, daher haben Hex-Codes anschließend 8 Ziffern. Farben außerhalb des Farbumfangs werden in den Spalten HEX, RGB und HSL mit dem CSS-Color-4-Algorithmus auf sRGB abgebildet. In der OKLCH-Spalte bleibt der nicht abgebildete Wert erhalten.
Wie kann ich einen Farbton in CSS nachbilden?
Kopiere den Hex- oder oklch()-Wert oder lass den Browser ihn mit color-mix(in oklab, var(--brand) 70%, #808080) mischen, um den 30-%-Farbton der OKLab-Einstellung zu erhalten. color-mix() funktioniert in allen aktuellen gängigen Browsern.