Farbe zu Grau
Erhalten Sie das Grau, das die wahrgenommene Helligkeit einer Farbe bewahrt: #3498db wird zu #828282, Grauwert 130, weil Grün am stärksten zählt, Rot weniger und Blau am wenigsten. Jeder Rechenschritt wird angezeigt. 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
- Quellfarbe als Hex
- #3498db
- Wert
- 130
- Eingabe-Hex
- #3498db
- Eingabe-Rgb
- 52, 152, 219
- Widerstand (Ω)
- 52
Ein Farbe-zu-Graustufen-Konverter nimmt eine opake Farbe—als Hex-Code oder als Rot-, Grün- und Blaukanäle—und bildet sie auf ein neutrales Grau ab, das die wahrgenommene Helligkeit bewahrt statt die Kanäle naiv zu mitteln. Fügen Sie #e74c3c, rgb(52, 152, 219) oder getrennte Ganzzahlen r, g und b ein; das Werkzeug wendet die klassischen Leuchtdichtegewichte 0.299 Rot, 0.587 Grün und 0.114 Blau an, rundet auf eine Grau-Ganzzahl von 0 bis 255 und liefert das graue Hex-Tripel, den Zahlenwert, eine CSS-rgb()-Zeichenkette und die schrittweise Arithmetik.
Warum Leuchtdichtegewichtung den einfachen Mittelwert schlägt
Das menschliche Sehen ist nicht gleich empfindlich für rotes, grünes und blaues Licht. Grün trägt am meisten zur wahrgenommenen Helligkeit bei, Rot weniger und Blau am wenigsten. Deshalb wirkt reines Blau #0000ff dunkler als reines Grün #00ff00, obwohl beide einen einzelnen Kanal bei 255 haben.
Ein naiver Mittelwert, der die drei Kanäle addiert und durch drei teilt, unterschätzt daher, wie hell eine grünlastige Farbe wirkt, und überschätzt blaulastige Töne. Leuchtdichtegewichtung korrigiert dieses Ungleichgewicht mit festen Koeffizienten aus dem klassischen Fernseh-Luma-Modell, oft BT.601 genannt: Grau Y ist 0.299 mal Rot plus 0.587 mal Grün plus 0.114 mal Blau, dann auf die nächste Ganzzahl in 0–255 gerundet. Das Ergebnis ist ein einzelner Kanal, der als #YY geschrieben—jedes Paar dasselbe Hex-Byte—auf der neutralen Achse des RGB-Raums liegt und die ungefähre Helligkeit des Originaltons behält.
Diese Seite ist bewusst ein Ein-Farben-Werkzeug, kein Bildfilter: Sie wandeln ein Design-Token, eine CSS-Variable oder ein Palettenmuster auf einmal um und erhalten ein prüfbares Grau-Hex und einen Wert. Unterrichtsübungen und Coding-Interviews verlangen diese Transformation oft von Hand; eine deterministische Referenz beseitigt Unklarheit über verwendete Gewichte, Rundung und ob dreistelliges Hex vor dem Multiplizieren expandiert wurde.
Praktische Tipps, Grenzen und verwandte Suchen
Übergeben Sie keine Alpha-Formen wie #RRGGBBAA oder rgba mit bedeutungsvollem Alpha, das erhalten bleiben soll—diese Seite wandelt nur opakes RGB um, und unerwartete Längen werden abgelehnt, damit Sie es merken statt Alpha still zu verwerfen. Benannte CSS-Farben wie rebeccapurple liegen außerhalb des Umfangs; lösen Sie sie zuerst mit einer Namensabelle zu Hex auf und rufen Sie dann diesen Konverter auf.
Beim Schreiben von Unit-Tests decken Sie mindestens ein leuchtendes Rot, ein grün-dominantes Teal, reines Blau, eine bereits graue Eingabe, die zu sich selbst runden soll, eine dreistellige Kurzform, eine rgb()-Zeichenkette und ein absichtlich ungültiges Hex ab, damit Validierungsregressionen nicht durchrutschen. Diese Seite richtet sich an Personen, die einen Farbe-zu-Grau-Konverter, einen Leuchtdichte-Hex-zu-Grau-Rechner oder ein kostenloses RGB-zu-Grauwert-Werkzeug online suchen; sie ist kein vollständiger Bild-Entsättiger, kein Multi-Raum-Konverter für HSL LAB oder CMYK und kein Palettengenerator.
Bevorzugen Sie diese Fähigkeit, wenn Sie bereits eine Farbe haben und nur deren Leuchtdichte-Grau-Hex und ganzzahligen Wert brauchen; muss Ihre Pipeline noch HSL oder Druck-CMYK ausgeben, nutzen Sie einen Multi-Format-Farbkonverter für jene Räume und dieses Werkzeug für den monochromen Schritt.
Anwendungsfälle
Monochrome Design-Tokens aus Marken-Hex
Designer fügen Marken-Hex-Codes ein und erhalten leuchtdichtegewichtete Grau-Hex-Werte für monochrome Themes, Druck-Mockups und deaktivierte UI ohne Bildeditor.
CSS-Variablen und Canvas-Füllung vorbereiten
Wandeln Sie nutzerseitige Farben aus einem Wähler in neutrale rgb()- und Hex-Strings für Graustufen-Vorschauen, Wasserzeichen-Ebenen oder druckfreundliche CSS-Variablen um.
Häufige Fragen
Welche Farbformate werden akzeptiert?
Hex #RGB oder #RRGGBB (optionales #), CSS rgb(r,g,b), nackte r,g,b-Listen oder getrennte Ganzzahlfelder r, g und b von 0–255. Alpha und benannte CSS-Farben werden nicht akzeptiert.
Welches Grau ergibt #3498db?
Es ergibt #828282. Die gewichtete Summe lautet 0,299 × 52 + 0,587 × 152 + 0,114 × 219 = 129,738 und wird auf den Grauwert 130 gerundet, also rgb(130, 130, 130).
Warum nicht einfach den Durchschnitt aus Rot, Grün und Blau bilden?
Weil das Auge die drei nicht gleich hell wahrnimmt. Grün trägt am meisten zur Helligkeit bei, Blau am wenigsten; ein einfacher Durchschnitt macht grünliche Farben zu dunkel und bläuliche zu hell. Deshalb wirkt #0000ff dunkler als #00ff00.
Welche Formel steckt hinter der Umrechnung?
Der Grauwert ergibt sich aus 0,299 mal Rot plus 0,587 mal Grün plus 0,114 mal Blau, gerundet auf eine ganze Zahl von 0 bis 255. Diese Gewichte stammen aus dem klassischen Fernsehmodell BT.601.
Kann ich Rot, Grün und Blau einzeln eingeben?
Ja. Statt eines Hexcodes können Sie die drei Kanäle als ganze Zahlen von 0 bis 255 eingeben oder eine Angabe wie rgb(52, 152, 219) einfügen. Kommazahlen und Werte außerhalb dieses Bereichs werden abgelehnt.
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 \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/grayscale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/grayscale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/grayscale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/grayscale", 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": "#3498db",
"hex": "valor-ejemplo"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.grayscale",
"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.
Limits
max_channel | 255 |
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 Farben—leere Eingabe, falsche Hex-Länge, Nicht-Hex-Zeichen, Kanäle außerhalb 0–255 oder unvollständiges Feldsatz—scheitern mit einem klaren invalid_input-Fehler statt eine Probe zu erfinden.
Wie Sie die API aufrufen und was zurückkommt
Umgebende Leerzeichen werden entfernt, Hex-Buchstaben dürfen groß oder klein sein, und das Rautenzeichen ist optional. Senden Sie einen JSON-Körper mit einer Farbzeichenkette oder drei getrennten Kanalfeldern. Das Feld color akzeptiert Aliasse hex, value, text, input und code; gültige Beispiele sind #3498db, 3498db, #abc, rgb(52, 152, 219) und die nackte Liste 52, 152, 219. Alternativ geben Sie r, g und b (Aliasse red, green, blue) als Ganzzahlen von 0 bis 255 an. Bei Erfolg liefert die Antwort input_hex und input_rgb der aufgelösten Quelle, ganzzahliges gray und Aliasse gray_value und value, gray_hex und hex als sechsstelligen Neutralkode, gray_rgb als dreielementiges Array, css als rgb(g, g, g), formula und weights mit den Koeffizienten, luminosity als vorgerundete gewichtete Summe mit fester Anzeigegenauigkeit, message als kurze Zusammenfassung und steps als geordnetes Array von Substitutionszeilen für Lehre oder Debugging. Fehlgeschlagene Validierung—fehlende Farbe und Kanäle, leere Zeichenkette, falsche Hex-Länge, Nicht-Hex-Zeichen, Programmierpräfix 0x, Kanäle außerhalb des Bereichs oder nicht-ganzzahlige Bruchkanäle—gibt invalid_input zurück und wird nicht berechnet. Der Preis ist pauschal $0.002 pro erfolgreicher Anfrage mit Einheit item und null marginalem Stückpreis.
Praktische Tipps, Grenzen und verwandte Suchen
Senden Sie vorzugsweise das exakte Token, das Ihr Designwerkzeug exportiert hat, einschließlich der Raute falls vorhanden; Hex mit und ohne Raute funktioniert, und die Antwort normalisiert die Quelle immer auf ein kleingeschriebenes sechsstelliges input_hex, damit nachgelagerte Diffs stabil bleiben. Fehlgeschlagene Aufgaben mit invalid_input verbrauchen kein vorausbezahltes Guthaben, was explorative Skripte und Formularvalidierung günstig hält, während unvollkommene Zwischenablagewerte eingefügt werden.
Integrationsbeispiele
Unit-Tests für Entsättigungs-Hilfen
Erzeugen Sie bekannte Grauwerte aus Hex- und RGB-Fixtures, damit Theme-Engines und Accessibility-Kontrastprüfungen stabile Leuchtdichte-Mathematik bestätigen.
Technische Fragen
Welche Formel nutzt der Farbe-zu-Grau-Konverter?
Klassische Leuchtdichtegewichtung: Y = 0.299·R + 0.587·G + 0.114·B, dann auf die nächste Ganzzahl von 0 bis 255 gerundet. Das Grau-Hex wiederholt dieses Byte dreimal als #YY.
Was wird bei Erfolg zurückgegeben?
Der ganzzahlige gray-Wert (auch gray_value und value), gray_hex / hex, gray_rgb, eine css-rgb()-Zeichenkette, die Quelle input_hex und input_rgb, formula, weights, luminosity, message und steps.
Was passiert bei einem ungültigen Farbwert?
Die API gibt invalid_input mit einer Meldung zurück, die das Problem beschreibt (leere Eingabe, schlechtes Hex, Kanäle außerhalb des Bereichs usw.). Fehlgeschlagene Validierung wird nicht berechnet.
Ist der Farbe-zu-Grau-Konverter kostenlos?
Das Browser-Werkzeug ist kostenlos und läuft lokal. API-Aufrufe nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreicher Anfrage; fehlgeschlagene Aufgaben werden nie berechnet.