Farbkontrast per Faktor anpassen

Kontrast um Mittelgrau ist der klassische Bildgebungsschritt, der jeden Rot-, Grün- und Blaukanal vom Acht-Bit-Mittelpunkt einhundertachtundzwanzig weg streckt oder zusammendrückt, statt die HSL-Helligkeit zu verschieben oder eine Gamma-Potenz anzuheben. Designer, Token-Autoren und Grafikingenieure nutzen einen Kontrastfaktor, wenn sie kräftigere oder flachere Proben wollen, ohne das Farbtonrad zu drehen oder die Farbe wie ein ganzes Foto zu behandeln. Dieses Werkzeug akzeptiert eine CSS-Hex-Farbe und einen endlichen Faktor im geschlossenen Intervall von null bis zehn, wendet die kanaleweise Regel an, dass die Ausgabe gleich Mittelgrau plus der vorzeichenbehafteten Distanz von Mittelgrau mal Faktor ist, begrenzt jeden Kanal auf den zulässigen Bereich von null bis zweihundertfünfundfünfzig und liefert das angepasste Hex sowie die RGB-Ganzzahlen. Ein Faktor von eins lässt die Probe unverändert; ein Faktor von null legt alle Kanäle auf Mittelgrau; Werte über eins erhöhen den Kontrast und können Lichter oder Schatten abschneiden.

Was Kontrast um Mittelgrau mit RGB-Kanälen macht

Beginnen Sie mit einer CSS-Hex-Farbe wie Raute drei drei sechs sechs c c oder der Kurzform Raute drei sechs c. Der Parser expandiert dreistellige Codes, wandelt Ziffern in Kleinbuchstaben und wandelt jedes Paar in Rot-, Grün- und Blau-Ganzzahlen von null bis zweihundertfünfundfünfzig um. Mittelgrau auf dieser Acht-Bit-Skala ist einhundertachtundzwanzig: der ganzzahlige Drehpunkt klassischer Kontrastregler in Malprogrammen und Rasterpipelines.

Jeder Kanal wird mit gewöhnlicher Arithmetik umgeschrieben: Mittelgrau abziehen, mit dem Kontrastfaktor multiplizieren, Mittelgrau wieder addieren, auf die nächste Ganzzahl runden und in den zulässigen Kasten von null bis zweihundertfünfundfünfzig klemmen. Kanäle, die schon bei Mittelgrau liegen, bleiben für jeden endlichen Faktor stehen, weil ihre vorzeichenbehaftete Distanz null ist. Kanäle dunkler als Mittelgrau entfernen sich davon, wenn der Faktor größer als eins ist, und nähern sich, wenn der Faktor zwischen null und eins liegt.

Kanäle heller als Mittelgrau tun dasselbe in die Gegenrichtung. Ein Faktor von genau eins ist Identität: jeder gerundete Kanal entspricht der Eingabe. Ein Faktor von null flacht die Probe auf allen drei Kanälen auf Mittelgrau ab, das ist der Hex-Code acht null acht null acht null.

Große Faktoren schneiden ab: ein dunkles Rot kann null erreichen und ein helles Blau zweihundertfünfundfünfzig, und diese abgeschnittenen Endpunkte bleiben an den gesetzlichen Wänden statt zu umwickeln. Derselbe Faktor wird unabhängig auf Rot, Grün und Blau angewendet, sodass die relative Kanalbalance gegenüber einer HSL-Kontrastgeschichte, die den Farbton einfriert, wechseln kann. Dieser Unterschied ist beabsichtigt: dieser Vertrag ist die lineare Mittelgrau-Streckung, kein wahrnehmungsbasierter Regler und kein WCAG-Paarverhältnis.

Alpha-Hex-Formen mit vier oder acht Stellen werden abgelehnt, weil der Vertrag nur opakes RGB ist.

Eingabevertrag, Antwortform und Validierung

Senden Sie zwei Felder: color als Hex-Zeichenkette und factor als endliche Zahl von null bis zehn einschließlich. Jede Probe enthält role, hex, die Ganzzahlen r g b und eine druckbare rgb-Zeichenkette. Die Top-Level-Felder hex, r, g und b spiegeln das kontrastangepasste Ergebnis für Einzeilen-Clients.

Eine kurze formula-Zeichenkette dokumentiert die Mittelgrau-Regel je Kanal für Dokumentation und Support. Typische Prüfungen: Faktor eins Punkt fünf auf ein mittleres Blau anwenden, Faktor null Punkt fünf, um ein gesättigtes Rot Richtung Grau abzuflachen, bestätigen, dass Faktor eins das Original-Hex zurückgibt, bestätigen, dass Faktor null Mittelgrau liefert, und Faktor fünfzehn oder eine fehlende Farbe ablehnen. Verdrahten Sie das kostenlose Browserformular für schnelle Vorschauen und rufen Sie denselben Vertrag aus Skripten auf, wenn Sie Massentoken-Erzeugung oder Continuous-Integration-Prüfungen brauchen.

Halten Sie den Faktor im dokumentierten Intervall, statt auf stilles Abschneiden des Multiplikators selbst zu vertrauen — dieses Werkzeug scheitert laut bei einem ungültigen Faktor, damit Designsysteme und Rendering-Pipelines über Umgebungen hinweg vorhersagbar bleiben.

Wo ein Mittelgrau-Kontrastfaktor seinen Nutzen entfaltet

Marken- und Produktteams halten oft ein einziges Helden-Hex und brauchen einen kräftigeren oder ruhigeren Begleiter, ohne einen vollständigen Bildeditor zu öffnen oder eine zweite Markenfarbe aus dem Auge zu erfinden. Design-Token-Autoren erzeugen Kontrastrampen, indem sie einen Faktor über eine Basisprobe streichen, wenn HSL-Aufhellen oder -Abdunkeln zu pastellig wirkt und Gamma zu display-spezifisch. Präsentations- und Marketingwerkzeuge erzeugen Kampagnenvarianten aus einem gesättigten Logo: heben Sie den Faktor für ein Plakat, senken Sie ihn für einen gedämpften Hintergrundchip.

Lehrende der Bildgebung können zeigen, dass das Strecken von RGB um Mittelgrau nicht dasselbe ist wie das Ändern der HSL-Helligkeit, nicht dasselbe wie eine Gamma-Potenzkurve und nicht dasselbe wie das Messen des WCAG-Kontrasts zwischen zwei Farben. Wenn Sie später zwei Hex-Codes auf Barrierefreiheit vergleichen, einen Gamma-Exponenten anwenden, in HSL aufhellen oder abdunkeln oder ein ganzes Foto filtern müssen, behandeln Sie das als getrennte Suchintentionen und Landings statt diese Mittelgrau-Faktor-Seite zu überladen.