Farbtöne aufhellen

Dieses Werkzeug mischt die angegebene Hexadezimalfarbe in gleichen Prozentschritten mit Weiß und liefert für jede Aufhellung präzise HEX- und RGB-Werte. Die Berechnung ist deterministisch: Dieselbe Farbe und Schrittzahl ergeben stets dieselbe Palette. Verwenden Sie sie für Oberflächenzustände, Hintergründe, Diagramme, Illustrationen oder Design-Tokens, die einen klaren Verlauf von der ursprünglichen Farbe bis Weiß benötigen.

Wählen Sie Basisfarbe und passende Schrittzahl

Beginnen Sie mit einer drei- oder sechsstelligen hexadezimalen Basisfarbe wie #36c oder #3366cc. Die Kurzform wird vor der Berechnung erweitert; beide Beispiele stehen daher exakt für dieselbe Farbe und liefern identische Ergebnisse. Wählen Sie anschließend zwischen einem und zwanzig Schritten. Die Schrittzahl bezeichnet die Anzahl der erzeugten Aufhellungen, wobei die ursprüngliche Basisfarbe nicht mitgezählt und reines Weiß als letztes Ergebnis eingeschlossen wird. Vier Schritte mischen die Basis somit mit 25%, 50%, 75% und 100% Weiß. Eine kleine Zahl eignet sich für eine kompakte Oberflächenhierarchie, während eine größere Zahl feinere Auswahlmöglichkeiten für Datenvisualisierungen, Illustrationen oder die Erkundung von Tokens bietet. Das Ergebnis weist die normalisierte Basis und jede berechnete Aufhellung getrennt aus. Dadurch erkennen Sie eindeutig, welcher Wert eingegeben und welche Werte erzeugt wurden. Da der Verlauf immer bei Weiß endet, besitzen benachbarte Farbfelder gleiche Änderungen des Mischanteils, auch wenn ihr sichtbarer Unterschied je nach Ausgangsfarbe und Bildschirm variiert.

Verstehen Sie die deterministische Mischformel

Jeder rote, grüne und blaue Kanal wird unabhängig in Richtung 255 gemischt, dem Kanalwert für Weiß. Für die Aufhellung Nummer k in einer Palette mit n Schritten berechnet das Werkzeug base + (255 − base) × k/n und rundet den Kanal auf die nächste Ganzzahl. Dasselbe Verhältnis für alle drei Kanäle bewahrt die Beziehung zur ursprünglichen Farbe und verringert gleichzeitig stetig deren Abstand zu Weiß. Die Antwort enthält einen bei eins beginnenden Index, den genauen Weißanteil, normalisiertes kleingeschriebenes HEX, die einzelnen Kanalwerte und eine RGB-Zeichenfolge. Dies ist eine direkte sRGB-Interpolation; sie verändert nicht die HSL-Helligkeit, führt keine gammakorrigierte optische Mischung durch und versucht keine wahrnehmungsbezogene Angleichung. Dieser Unterschied ist beim Vergleich mit Grafikprogrammen wichtig, die mehrere Mischfarbräume anbieten. Die Formel ist bewusst einfach, dokumentiert und stabil. Damit eignet sie sich für Build-Skripte, Snapshots, automatische Token-Erzeugung und Systeme, in denen Reproduzierbarkeit wichtiger ist als eine subjektive visuelle Feinabstimmung.

Setzen Sie die Palette sicher im Designsystem ein

Betrachten Sie die erzeugten Werte als konsistente Ausgangsskala und prüfen Sie sie anschließend im tatsächlichen Kontext. Hellere Töne eignen sich für ausgewählte Zeilen, Benachrichtigungshintergründe, dezente Rahmen, Diagrammfüllungen, Hover-Flächen und dekorative Bereiche. Eine mathematisch regelmäßige Palette garantiert jedoch nicht automatisch barrierefreie Kontraste. Prüfen Sie Vordergrundtext und Symbole auf jeder gewählten Aufhellung anhand der für Ihr Produkt geltenden Kontrastanforderungen. Bewahren Sie die Basisfarbe als separates Token auf und benennen Sie erzeugte Werte nach ihrer Funktion oder ihrem Mischanteil, etwa brand-tint-25 oder info-background, statt nur ihre Listenposition zu verwenden. Prozentnamen bleiben verständlich, wenn eine spätere Palette eine andere Schrittzahl nutzt. Speichern Sie in automatisierten Abläufen die zurückgegebenen HEX-Werte direkt und halten Sie Eingabefarbe und Schrittzahl daneben fest, damit sich die Palette reproduzieren lässt. Ungültige Farben, Hex-Formate mit Alphakanal, Bruchzahlen und Werte außerhalb des zulässigen Bereichs werden abgelehnt, sodass unbeabsichtigte Token-Änderungen nicht unbemerkt bleiben.