Farbaufhellungs-Generator
Erzeuge hellere Farbtönungen, indem du eine Farbe in gleichmäßigen Schritten mit Weiß 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 Tönung eine Tabelle mit HEX-, RGB-, HSL- und OKLCH-Werten, beginnend mit der Originalfarbe. Das Mischen in sRGB entspricht klassischen Tönungstools und Sass, während OKLab für wahrnehmbar gleichmäßige Schritte sorgt. Ideal für Hintergründe, Hover-Zustände und Farbskalen.
Häufig gestellte Fragen
Was ist eine Farbtönung?
Eine Farbtönung entsteht, wenn eine Farbe mit Weiß gemischt wird. Der Farbton bleibt erhalten und die Farbe wird heller und blasser. Eine Schattierung wird dagegen mit Schwarz und ein Farbton mit Grau gemischt.
Wie sind die Schritte abgestuft?
Bei N Schritten wird die Farbe in Zeile k mit (k - 1) / N Weiß 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 Weiß 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 Weiß und die meisten klassischen Tönungsgeneratoren tun. Beim Mischen in OKLab wird ein wahrnehmungsbezogener Farbraum verwendet. Dadurch wirken die Helligkeitsschritte gleichmäßiger, und der helle Bereich wird nicht so schnell ausgewaschen.
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önungen 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 Weißanteil, 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 Tönung erhalten, da Weiß 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 Tönungen in CSS?
Kopiere die Hex- oder oklch()-Werte in benutzerdefinierte Eigenschaften wie --brand-100 und --brand-200. Wenn du stattdessen im Browser mischen möchtest, ergibt color-mix(in oklab, var(--brand) 80%, white) dieselbe Tönung mit 20 % wie die OKLab-Einstellung.
Kann ich weißen Text auf eine helle Tönung setzen?
In der Regel nicht, denn helle Tönungen haben wenig Kontrast zu Weiß. Verwende dunklen Text auf hellen Tönungen und prüfe jedes Paar mit einem Kontrastprüfer. Normaler Text benötigt für WCAG AA mindestens 4.5:1.