HSL-zu-HWB-Konverter

HSL beschreibt eine Farbe über den Farbton auf dem Rad, die Sättigung als wie lebhaft die Mischung ist und die Helligkeit als wie nah sie an Schwarz oder Weiß liegt. HWB nutzt denselben Farbton und benennt, wie viel Weiß und wie viel Schwarz in den reinen Farbton gemischt werden. Wer Farben bereits in HSL wählt, braucht HWB oft, um hwb()-Funktionen des CSS Color Module zu schreiben, mit Illustrationswerkzeugen zu sprechen, die Schieberegler für Weiß- und Schwarzanteil zeigen, oder eine Probe als Aufhellung plus Abdunkelung zu dokumentieren. Dieser Konverter nimmt den Farbton in Grad von null bis dreihundertsechzig sowie Sättigung und Helligkeit als Prozentsätze von null bis hundert und liefert das passende HWB-Tripel mit einer CSS-Zeichenkette hwb().

Wie HSL auf Farbton, Weißanteil und Schwarzanteil abgebildet wird

Der Farbton ist HSL und HWB gemeinsam: null Grad ist reines Rot, einhundertzwanzig reines Grün, zweihundertvierzig reines Blau, und dreihundertsechzig schließt den Kreis wieder bei Rot. HSL speichert dann die Sättigung als wie weit ein Grau der gewählten Helligkeit zur vollchromatischen Farbe bei diesem Farbton gedehnt wird, und die Helligkeit als die Mischung zwischen Schwarz bei null Prozent, einem Mittelton nahe fünfzig Prozent und Weiß bei hundert Prozent. HWB benennt dieselbe Farbe als reinen Farbton, gemischt mit einer Weißmenge und einer Schwarzmenge.

Auf dem Einheitsintervall ist die Abbildung geschlossen und braucht keinen Umweg über ganzzahliges RGB: das Chroma ist eins minus dem Absolutbetrag von zweimal Helligkeit minus eins, alles multipliziert mit der Sättigung; der Weißanteil ist die Helligkeit minus der Hälfte des Chromas; der Schwarzanteil ist eins minus der Helligkeit minus der Hälfte des Chromas. Das entspricht dem minimalen RGB-Kanal als Weiß und eins minus dem maximalen RGB-Kanal als Schwarz — so definiert das CSS Color Module Level Four HWB.

Bei Sättigung null verschwindet das Chroma, sodass Weiß- und Schwarzanteil komplementäre Prozentsätze werden, die sich zu hundert addieren und ein Grau, Schwarz oder Weiß beschreiben. Bei Helligkeit fünfzig Prozent und Sättigung hundert Prozent ist das Chroma eins und sowohl Weiß als auch Schwarz fallen auf null, das ist der reine Farbton. Der Farbton muss im geschlossenen Intervall von null bis dreihundertsechzig liegen; Sättigung und Helligkeit müssen jeweils zwischen null und hundert Prozent einschließlich liegen.

Was Sie senden und was Sie zurückerhalten

Senden Sie drei endliche Zahlen unter den Feldern h, s und l. Das Feld h ist der Farbton in Grad und ist erforderlich; es muss zwischen null und dreihundertsechzig einschließlich liegen, weil HSL und HWB diesen Winkel teilen und dieser Konverter keine Umwicklung erfindet. Die Felder s und l sind Sättigung und Helligkeit als Prozentsätze von null bis hundert.

Liegt die Sättigung außerhalb von null bis hundert, erklärt die Antwort, dass s ein Prozentsatz in diesem geschlossenen Band sein muss, damit ein Client den Token vor dem erneuten Versuch klemmen oder korrigieren kann; dieselbe Regel gilt für die Helligkeit. Bei Erfolg gibt die Antwort die bereinigten h-, s- und l-Werte zurück, meldet Weißanteil w und Schwarzanteil b als Prozentsätze, nestet das Quellobjekt hsl und das Ergebnisobjekt hwb, erzeugt eine druckbare CSS-Zeichenkette der Form hwb(H W% B%) und enthält eine kurze Formelnotiz, die die Chroma-Identitäten wiederholt.

Klassische Prüfungen umfassen mitteltoniges Blau-Cyan mit Farbton zweihundertzehn, Sättigung achtzig und Helligkeit fünfundvierzig, abgebildet auf neun Prozent Weiß und neunzehn Prozent Schwarz; reines Rot mit Farbton null, Sättigung hundert und Helligkeit fünfzig, abgebildet auf null Weiß und null Schwarz; sowie jeden Farbton mit Sättigung null, der zu einer achromatischen Mischung kollabiert, deren Weiß plus Schwarz hundert ergibt.

Wo HSL-zu-HWB-Umwandlung in der Praxis vorkommt

Designsysteme verfassen Markenrampen oft in HSL, damit Produktteams die Helligkeit für zugänglichen Kontrast stufen und zugleich Farbton und ein Sättigungsband stabil halten; moderne Stylesheets, Illustrations-Apps und mehrere native Wähler zeigen jedoch inzwischen HWB, weil das Mischen eines reinen Farbtons mit Weiß und Schwarz der Sprache der Maler über Aufhellungen und Abdunkelungen entspricht. Front-End-Ingenieure, die einen Token von hsl()-Custom-Properties nach hwb() migrieren, brauchen ein deterministisches Orakel, das nicht von der Serialisierung des berechneten Stils eines bestimmten Browsers abhängt.

Datenvisualisierungs- und generative Kunstwerkzeuge, die kategoriale Paletten bauen, indem sie den Farbton bei fester Sättigung und Helligkeit fortschalten, müssen dennoch HWB ausgeben, wenn ein Renderer oder eine Druckpipeline Weiß- und Schwarzanteil statt einer dritten Helligkeitsachse verlangt. Lehrpläne und Bootcamp-Lektionen lehren zylindrische Modelle nebeneinander und brauchen einen einzigen vertrauenswürdigen Schlüssel für Hausaufgaben, der zu den Identitäten des CSS Color Module passt und nicht zu einem Screenshot eines Farbwählers. Barrierefreiheits-Workflows, die wahrgenommene Helligkeit in HSL anpassen und dann an einen HWB-basierten Editor übergeben, brauchen weiterhin exakte Kanalabbildung ohne browser-only APIs.

Wenn Sie später HSL nach RGB, HSL nach HSV, Multi-Format-Umwandlung HEX LAB CMYK oder WCAG-Kontrastprüfungen brauchen, behandeln Sie diese als separate Suchintentionen und Landings statt diese dedizierte HSL-zu-HWB-Konverterseite zu überladen.