Farbaufheller

Ein Farbaufheller nimmt einen CSS-Hex-Code und einen Prozentsatz und liefert eine hellere Version, indem er nur den Helligkeitskanal im HSL-Raum anhebt. Farbton und Sättigung bleiben gleich, sodass Markenblau blau und Markenrot rot bleibt, während die Fläche für Hover-Zustände, Hintergründe und barrierefreie Tönungen weicher wird. Der Anteil ist ein Prozentsatz des verbleibenden Spielraums zwischen der aktuellen Helligkeit und reinem Weiß: null Prozent lässt das Farbfeld unverändert, hundert Prozent ergibt reines Weiß, und Zwischenwerte skalieren sanft. Ungültige Hex-Zeichenketten und Prozentsätze außerhalb von null bis hundert werden mit einem klaren Validierungsfehler abgelehnt statt still geklemmt.

So funktioniert das Aufhellen in HSL

Beginnen Sie mit einer CSS-Hex-Farbe wie #3366cc oder der Kurzform #36c. Der Parser expandiert dreistellige Codes, setzt die Ziffern in Kleinbuchstaben und wandelt jedes Paar in Rot-, Grün- und Blau-Ganzzahlen von null bis zweihundertfünfundfünfzig um. Diese Kanäle werden mit den Standardformeln von CSS und W3C auf Farbton, Sättigung und Helligkeit abgebildet: die Helligkeit ist der Mittelwert der maximalen und minimalen Kanalfaktionen, die Sättigung hängt von dieser Helligkeit ab, und der Farbton wird in Grad am Farbrad gemessen, wobei achromatische Grautöne Farbton null melden.

Aufhellen mischt die Farbe nicht in RGB Richtung Weiß; es hebt nur den Helligkeitsprozentsatz an, während Farbton und Sättigung fest bleiben. Die neue Helligkeit ist die alte plus die verbleibende Distanz bis hundert, skaliert mit dem Anteil durch hundert. Bei amount null ist die Formel reine Identität; bei amount hundert ist das Ergebnis reines Weiß mit Helligkeit hundert; bei amount zwanzig wandert ein mitteltoniges Blau zwanzig Prozent des Weges von seiner aktuellen Helligkeit zu Weiß.

Nach der neuen Helligkeit wandelt derselbe CSS-Pfad von Farbton zu RGB HSL zurück in Ganzzahlkanäle und einen sechsstelligen Hex-Code in Kleinbuchstaben. Es gibt keine Zufallsseeds, Zeitstempel oder Netzwerkanrufe, daher liefern dieselben Eingaben immer dieselbe Ausgabe. Alpha-Hex-Formen mit vier oder acht Stellen werden abgelehnt, weil dieser Vertrag nur opakes RGB ist.

Prozentsätze unter null oder über hundert scheitern an der Validierung, damit Clients den erlaubten Bereich nicht still überschreiten.

Was Sie senden und was Sie zurückerhalten

Senden Sie zwei Felder: color als Hex-Zeichenkette und amount als endliche Zahl zwischen null und hundert einschließlich. Bei Erfolg spiegelt die Antwort die normalisierte sechsstellige Farbe und den bereinigten amount wider und liefert dann original- und result-Farbfelder. Jedes Farbfeld enthält role, hex, Ganzzahlen r g b, Farbton-Sättigung-Helligkeit-Zahlen sowie druckbare rgb- und hsl-Zeichenketten.

Eine kurze formula-Zeichenkette dokumentiert die L-prime-Regel für Docs und Support. Typische Prüfungen: #3366cc um zwanzig Prozent aufhellen, reines Rot um fünfzig Prozent aufhellen und bestätigen, dass amount null das Original-Hex zurückgibt. Nutzen Sie das kostenlose Browserformular für Design-Reviews und schnelle Tönungen, und rufen Sie denselben Vertrag aus Skripten auf, wenn Sie Hover-Token oder Themenskalen in Masse brauchen.

Halten Sie amount im dokumentierten Bereich statt auf stille Klemmungen zu setzen — dieses Tool scheitert laut, damit Designsysteme vorhersagbar bleiben.

Wo Farbaufheller in der Praxis vorkommen

Produktdesigner bauen Hover- und Active-Zustände, indem sie Markenprimärfarben aufhellen, ohne den Farbton zu verschieben, sodass eine zwanzigprozentige Aufhellung eines Marine-CTA marine bleibt statt zu Grau oder Cyan zu verwaschen. Accessibility-Prüfer erkunden hellere Begleiter von Text- oder Icon-Farben auf dunklen Hintergründen und übergeben die Kandidaten an einen Kontrastprüfer statt Mitteltöne aus dem Bauch zu schätzen. Marketingteams erzeugen pastellige Kampagnen-Farbfelder aus gesättigten Logos für Social-Banner und E-Mail-Header und bewahren die Marken-Farbtonidentität.

Frontend-Ingenieure skripten Schattenrampen in der Continuous Integration, sodass eine einzelne Markenfarbe eine dokumentierte Leiter hellerer Stufen für Diagramme, Chips und Sekundärbuttons liefert. Wenn Sie später eine Farbe abdunkeln, HSL in RGB wandeln, eine analoge Palette bauen oder WCAG-Kontrast prüfen müssen, behandeln Sie das als getrennte Suchabsichten und Landings statt diese Aufheller-Seite zu überladen.