Farbschattengenerator
Erzeuge dunklere Farbschattierungen, indem du eine Farbe in gleichmäßigen Schritten mit Schwarz mischst. Gib eine Farbe in einem beliebigen CSS-Format ein, wähle 2 bis 20 Schritte und einen Mischfarbraum aus und erhalte für jede Schattierung eine Tabelle mit HEX-, RGB-, HSL- und OKLCH-Werten, beginnend mit der Originalfarbe. Das Mischen in sRGB entspricht klassischen Schattierungstools und Sass, während OKLab für wahrnehmbar gleichmäßige Schritte sorgt. Ideal zum Erstellen von UI-Farbskalen.
Häufig gestellte Fragen
Was ist eine Farbschattierung?
Eine Farbschattierung entsteht, wenn eine Farbe mit Schwarz gemischt wird. Der Farbton bleibt erhalten und die Farbe wird dunkler. Eine Tönung wird dagegen mit Weiß und ein Farbton mit Grau gemischt.
Wie sind die Schritte abgestuft?
Bei N Schritten wird die Farbe in Zeile k mit (k - 1) / N Schwarz gemischt. Bei 10 Schritten ergeben sich also 0 %, 10 %, 20 % und so weiter bis 90 %. Die erste Zeile enthält immer deine Originalfarbe, und reines Schwarz kommt in der Liste nicht vor.
Was ist der Unterschied zwischen dem Mischen in sRGB und in OKLab?
Beim Mischen in sRGB werden die gamma-kodierten Kanalwerte gemittelt, wie es Sass mix() mit Schwarz und die meisten klassischen Schattierungsgeneratoren tun. Beim Mischen in OKLab wird ein wahrnehmungsbezogener Farbraum verwendet. Dadurch wirken die Schritte in der Helligkeit gleichmäßiger und die dunkleren Schattierungen behalten mehr von ihrer Farbe.
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 Farbschattierungen 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 den Schwarzanteil, den Hex-Code, rgb(), hsl() und oklch() in moderner CSS-Syntax. RGB-Kanäle sind Ganzzahlen, HSL-Prozentwerte haben bis zu zwei Dezimalstellen und OKLCH-Helligkeit sowie -Chroma bis zu vier.
Was passiert mit transparenten Farben?
Der Alphawert der Eingabe bleibt für jede Schattierung erhalten, da Schwarz mit demselben Alphawert beigemischt wird. Die Hex-Codes haben dann 8 Stellen, und die CSS-Funktionen enden mit einem Schrägstrich und dem Alphawert.
Was passiert mit Farben außerhalb von sRGB?
Beim Mischen wird die gesamte Farbe verwendet, doch HEX, RGB und HSL können nur sRGB darstellen. Daher werden Schritte außerhalb des Farbumfangs in diesen Spalten mit dem CSS Color-4-Algorithmus nach sRGB überführt. Die OKLCH-Spalte behält den nicht umgerechneten Wert bei.
Wie verwende ich die Schattierungen in CSS?
Kopiere die Hex- oder oklch()-Werte in benutzerdefinierte Eigenschaften wie --brand-600 und --brand-700. Wenn du stattdessen im Browser mischen möchtest, ergibt color-mix(in oklab, var(--brand) 80%, black) dieselbe Schattierung mit 20 % wie die OKLab-Einstellung.
Sind dunklere Farbschattierungen automatisch barrierefrei?
Nein. Prüfe den Textkontrast für jede Schattierung mit einem Kontrastprüfer, denn eine dunkel wirkende Schattierung kann gegenüber einer anderen dunklen Farbe oder farbigem Text trotzdem unter 4.5:1 liegen.