Hex zu Grau nach HSL-Helligkeit
Machen Sie aus einer Hexfarbe ein Grau nach HSL-Art: Bei #e74c3c ist der höchste Kanal 231 und der niedrigste 60, die Helligkeit also (231 + 60) / 2 = 145,5, und das Ergebnis ist #929292. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Farbe
- #e74c3c
- Wert
- 146
- Eingabe-Hex
- #e74c3c
- Eingabe-RGB
- 231, 76, 60
- Widerstand (Ω)
- 231
Ein Konverter von Hex zu Graustufen nach Helligkeit (lightness) bildet eine opake Hex-Farbe auf ein einziges neutrales Grau ab, gemäß der klassischen HSL-Lightness-Definition: dem Mittelwert des maximalen und des minimalen Kanals unter Rot, Grün und Blau. Fügen Sie #e74c3c, #3498db oder die dreistellige Kurzform wie #f0a ein; das Werkzeug expandiert den Hex, liest jeden Kanal als Ganzzahl von null bis zweihundertfünfundfünfzig, berechnet L gleich max plus min durch zwei, rundet auf das nächste Grau-Byte und liefert das graue Hex-Tripel, den numerischen Wert, eine CSS-rgb()-Zeichenkette, die max- und min-Kanäle sowie die schrittweise Arithmetik.
Warum HSL-Lightness von Luminositäts-Graustufen abweicht
Es gibt mehr als eine Standardmethode, eine Farbe zu Grau zu verdichten, und die falsche Formel ändert stillschweigend Kontrast, Druck-Mockups und monochrome Themes. HSL-Lightness betrachtet nur den hellsten und den dunkelsten Kanal: L ist der Mittelwert des maximalen und des minimalen Kanals unter Rot, Grün und Blau. Reines Rot #ff0000, reines Grün #00ff00 und reines Blau #0000ff teilen max zweihundertfünfundfünfzig und min null, daher mappen alle drei unter Lightness auf dasselbe Mittelgrau, obwohl sie dem Auge sehr unterschiedlich erscheinen.
Luminositätsgewichtung multipliziert die Kanäle hingegen mit festen BT.601-Koeffizienten, die Grün betonen und Blau abschwächen, sodass reines Grün ein helleres Grau wird als reines Blau. Keine Methode ist falsch; sie bedienen unterschiedliche Suchabsichten. Wer hex zu grau nach lightness, HSL entsättigen zu grau oder max-min-Mittelwert-Grau-Konverter tippt, will die HSL-Definition, nicht die Fernseh-Luma-Formel.
Diese Landing implementiert nur den Lightness-Pfad, dokumentiert die Formel in jeder erfolgreichen Antwort und überlässt die Luminositäts-Umwandlung dem Geschwister-Konverter Farbe zu Grau mit gewichteten Koeffizienten. Übungsaufgaben und Coding-Interviews spezifizieren Lightness oft explizit als max plus min durch zwei; eine deterministische Referenz beseitigt Unklarheiten, ob Kanäle zuerst auf null bis eins normalisiert wurden, wie Halbzahlen gerundet werden und ob dreistelliges Hex vor max und min expandiert wurde.
Praktische Tipps, Grenzen und verwandte Suchen
Schreiben Sie Unit-Tests, die mindestens ein leuchtendes Rot, ein grün-dominiertes Teal, ein reines Blau, das unter Lightness dem reinen Rot entsprechen soll, eine bereits graue Eingabe mit Round-Trip zu sich selbst, eine dreistellige Kurzform und ein absichtlich ungültiges Hex abdecken, damit Validierungsregressionen nicht durchrutschen. Denken Sie daran, dass Lightness reine Primärfarben als gleich hell behandelt: braucht Ihr Produkt grün-gewichtete wahrgenommene Helligkeit, nutzen Sie den Luminositäts-Graustufen-Konverter statt dieser Seite. Übergeben Sie keine Alpha-Formen wie #RRGGBBAA — diese Landing wandelt nur opakes Hex um und lehnt unerwartete Längen ab.
Benannte CSS-Farben und rgb()-Strings sollten zuerst zu Hex aufgelöst und dann hier übergeben werden, damit die Validierungsfläche eine einzige klar spezifizierte Farbzeichenkette bleibt. Diese Seite zielt auf Suchen nach hex zu grau nach lightness, HSL-Lightness-Grau-Konverter, max-min-Mittelwert-Grau aus Hex oder Hex gratis per Lightness entsättigen online; sie ist kein voller Bild-Entsättiger, kein Multi-Raum-Konverter für LAB oder CMYK und kein Paletten-Generator.
Bevorzugen Sie diese Fähigkeit, wenn Sie bereits einen Hex-Token haben und nur dessen HSL-Lightness-Grau-Hex und Ganzzahlwert brauchen; muss Ihre Pipeline weiterhin HSL-Komponenten, Farbton oder Sättigung ausgeben, nutzen Sie einen Hex-zu-HSL-Konverter für diese Felder und dieses Werkzeug für den monochromen Schritt.
Anwendungsfälle
Monochrome Tokens entlang der HSL-Achse
Designer fügen Marken-Hex-Codes ein und erhalten HSL-Lightness-Grau-Hex-Werte für monochrome Themes, die dem CSS-Verhalten Entsättigen-zu-Lightness folgen müssen, nicht Luminositätsgewichten.
Lightness- und Luminositäts-Grau vergleichen
Wandeln Sie dasselbe Hex mit diesem Werkzeug und einem Luminositäts-Konverter um, dokumentieren Sie die Divergenz reiner Primärfarben und wählen Sie die Methode Ihres Design-Systems.
Häufige Fragen
Welche Formel nutzt Hex zu Grau nach Lightness?
HSL-Lightness auf 8-Bit-Kanälen: L = (max(R,G,B) + min(R,G,B)) / 2, gerundet auf die nächste Ganzzahl von 0 bis 255. Das Grau-Hex wiederholt dieses Byte dreimal als #YY.
Worin unterscheidet es sich von Luminositäts-Graustufen?
Lightness mittelt nur den hellsten und dunkelsten Kanal. Luminosität gewichtet R, G und B (klassisch 0.299, 0.587, 0.114). Reines Rot, Grün und Blau teilen dasselbe Lightness-Grau, aber nicht dasselbe Luminositäts-Grau.
Welche Farbformate werden akzeptiert?
Hex #RGB oder #RRGGBB mit optionalem führendem #, groß-/kleinschreibungsunabhängig. Alpha-Hex, benannte CSS-Farben und rgb()-Strings werden auf dieser Seite nicht akzeptiert.
Welches Grau ergibt #e74c3c nach HSL-Helligkeit?
Es ergibt #929292. Die Kanäle sind 231, 76 und 60; gemittelt werden der höchste und der niedrigste, (231 + 60) / 2 = 145,5, gerundet auf den Grauwert 146.
Warum werden reines Rot, Grün und Blau zum selben Grau?
Weil bei #ff0000, #00ff00 und #0000ff der höchste Kanal jeweils 255 und der niedrigste 0 ist. Die HSL-Helligkeit achtet nur auf diese beiden Werte, deshalb landen alle drei beim selben mittleren Grau.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/color/grayscale-lightness \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#e74c3c"}'const res = await fetch("https://api.kit.forhosting.com/color/grayscale-lightness", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#e74c3c"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/grayscale-lightness",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#e74c3c"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/grayscale-lightness", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#e74c3c"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/grayscale-lightness", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"color": "#e74c3c"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.grayscale_lightness",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Ungültige Farbzeichenketten — leere Eingabe, falsche Hex-Länge, nicht-hexadezimale Zeichen, Programmierpräfix 0x oder fehlendes Feld — scheitern mit einem klaren invalid_input-Fehler statt einer erfundenen Probe.
API aufrufen und was zurückkommt
Umgebende Leerzeichen werden entfernt, Hex-Buchstaben dürfen groß oder klein sein, und das führende Hash ist optional. Nur drei- und sechsstellige hexadezimale Körper werden akzeptiert; achtstellige Formen mit Alpha, benannte CSS-Farben wie rebeccapurple, rgb()-Funktionsstrings und separate numerische Kanalfelder liegen außerhalb dieses string-zentrierten Vertrags und werden abgelehnt, damit Sie es bemerken statt Alpha still zu verwerfen oder ein Parse zu erfinden. Senden Sie einen JSON-Body mit einer Pflicht-Zeichenkette color. Das Feld color akzeptiert die Aliase hex, value, text, input und code; gültige Beispiele sind #e74c3c, e74c3c, #abc und ABC. Bei Erfolg liefert die Antwort input_hex und input_rgb der aufgelösten Quelle, die Ganzzahl gray und die Aliase gray_value und value, gray_hex und hex als sechstelligen Neutralcode, gray_rgb als Drei-Element-Array, css als rgb(g, g, g), max_channel und min_channel, lightness als Vor-Rundungs-Mittelwert mit fester Anzeigegenauigkeit, formula mit L gleich max plus min durch zwei, method gleich hsl_lightness, message als kurze englische Zusammenfassung und steps als geordnetes Array von Substitutionszeilen für Lehre oder Debugging. Fehlgeschlagene Validierung — fehlendes color, leere Zeichenkette, falsche Hex-Länge, Nicht-Hex-Zeichen oder Programmierpräfix 0x — liefert invalid_input und wird nie berechnet. Der Preis ist pauschal $0.002 pro erfolgreicher Anfrage mit Einheit item. Senden Sie bevorzugt den exakten Token, den Ihr Design-Tool exportiert hat, inklusive Hash falls vorhanden; die Antwort normalisiert die Quelle stets zu einem sechstelligen input_hex in Kleinbuchstaben, damit nachgelagerte Diffs über Zwischenablage-Formate stabil bleiben.
Praktische Tipps, Grenzen und verwandte Suchen
Fehlgeschlagene Aufgaben mit invalid_input verbrauchen kein Prepaid-Guthaben, was explorative Skripte und Formularvalidierung günstig hält, während unvollkommene Zwischenablagewerte eingefügt werden. Verankern Sie gerundetes Grau und gray_hex in automatisierten Tests, damit eine künftige Rundungsrichtlinie nicht still durchgeht, und dokumentieren Sie, dass method hsl_lightness ist, wenn Sie Ergebnisse neben luminositätsbasierten Grautönen anderer Systeme speichern.
Integrationsbeispiele
Unit-Tests für Lightness-Entsättigung
Erzeugen Sie bekannte Grauwerte aus Hex-Fixtures, damit Theme-Engines die stabile (max+min)/2-Mathematik absichern und Regressionen beim Wechsel von Luminositätsformeln erkennen.
Technische Fragen
Was passiert bei einer ungültigen Farbzeichenkette?
Die API liefert invalid_input mit einer Beschreibung des Problems (leere Eingabe, falsche Hex-Länge, Nicht-Hex-Zeichen, 0x-Präfix usw.). Fehlgeschlagene Validierung wird nicht berechnet.
Ist Hex zu Grau nach Lightness kostenlos?
Das Browser-Werkzeug ist kostenlos und läuft lokal. API-Aufrufe nutzen prepaid KIT-Guthaben zu $0.002 pro erfolgreicher Anfrage; fehlgeschlagene Aufgaben werden nie berechnet.