Farbkanal extrahieren
Erhalten Sie eine einzige Zahl aus einer Farbe statt einer kompletten Umrechnung: Der Rotwert von #3498db ist 52, die Transparenz von #3498db80 ist 128, beide auf derselben Skala von 0 bis 255. 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
- #3498db
- Kanal
- Red
- Wert
- 52
- Red
- 52
- Grün
- 152
- Blau
- 219
Designsysteme, Canvas-Füllungen, Shader-Uniforms und Kontrastprüfungen für Barrierefreiheit brauchen oft eine einzige Zahl aus einer Farbe, keine vollständige Umrechnungstabelle. Sie haben bereits ein Hex-Token wie #3498db oder ein achtstelliges #3498db80 oder eine CSS-Zeichenkette rgb() bzw. rgba() und benötigen den roten, grünen, blauen oder Alpha-Kanal als ganze Zahl auf der Skala 0–255. Diese Fähigkeit extrahiert den benannten Kanal: Sie prüft die Farbzeichenkette und den Kanalnamen und liefert diese Zahl deterministisch. Geschwisterwerkzeuge, die Hex in ein vollständiges RGB-Tripel wandeln, lassen Sie trotzdem ein Feld wählen; diese Seite ist der eigene Extraktor für Pipelines, die genau eine Bande verlangen.
Was ein Farbkanal ist und wie die Zahl entsteht
Eine digitale Bildschirmfarbe besteht fast immer aus vier gepackten Acht-Bit-Kanälen: Rot, Grün, Blau und einer optionalen Alpha-Bande (Deckkraft). In der sechsstelligen Hex-Form #RRGGBB ist das erste Paar Rot, das mittlere Grün und das letzte Blau; jedes Paar wird als Ganzzahl zur Basis sechzehn von 00 (null) bis FF (zweihundertfünfundfünfzig) gelesen. Die vier- und achtstelligen Formen #RGBA und #RRGGBBAA fügen ein Alpha-Paar auf derselben Skala 0–255 hinzu; deshalb ist ein Token wie #3498db80 nicht dieselbe Farbe wie #3498db: das Extra-Paar ist Transparenz, kein vierter Farbton.
CSS rgb() schreibt dieselben drei Ganzzahlen dezimal; rgba() ergänzt eine Alpha-Einheit im Einheitsintervall von null bis eins, und dieser Solver multipliziert diese Einheit mit 255 und rundet zur nächsten ganzen Zahl, damit jeder extrahierte Kanal dieselbe Skala teilt. Die drei- und vierstellige Hex-Kurzform verdoppelt jedes Nibble: #f00c wird zu #ff0000cc, bevor ein Kanal gelesen wird. Der Algorithmus ist reine Arithmetik und Zeichenkettenprüfung.
Wo das Extrahieren eines Kanals seinen Nutzen hat
Oberflächentests, die den Rotkanal eines Marken-Tokens prüfen, Shader-Lader, die ein einziges Uniform binden, und Tabellenprüfungen, die nur das Alpha einer Überlagerung vergleichen, wollen eine Zahl, keinen Dreifeld-Konverter zum Auspacken. Spiel- und Druckpipelines, die #RRGGBBAA schreiben, brauchen ein lautes Scheitern, wenn jemand hue oder saturation ins Feld channel tippt, statt still NaN zurückzugeben. Bevorzugen Sie diese Fähigkeit, wenn die Suchabsicht lautet: Farbkanal extrahieren — Rot, Grün, Blau oder Alpha als Zahl.
Es ist keine Hex-zu-RGB-Seite, kein Palettenzieher aus Fotos, kein Mischer und keine Tabelle benannter CSS-Farben. Halten Sie Anfragen klein, pinnen Sie value und die normalisierte Farbe in Tests, und Sie erhalten eine reproduzierbare ganze Zahl für Tickets, LMS-Erweiterungen und Edge-Worker, ohne eine eigene Farbverwaltungsbibliothek aufzustellen.
Anwendungsfälle
Shader- und Canvas-Uniforms
Binden Sie einen einzelnen Kanal 0–255 aus einem Hex- oder rgba()-Token an ein WebGL-Uniform, eine Canvas-Füllhilfe oder eine Pipeline für CSS-Custom-Properties.
Alpha-Prüfungen bei Überlagerungen
Lesen Sie das geschriebene Alpha von #RRGGBBAA- oder rgba()-Überlagerungen und lehnen Sie Tokens ab, die Transparenz still verloren oder einen unbekannten Kanalnamen nutzten.
Häufige Fragen
Welche Kanäle können Sie aus einer Farbe extrahieren?
Genau vier benannte Kanäle: red, green, blue und alpha. Jeder kommt als ganze Zahl von 0 bis 255 im Feld value zurück.
Welche Farbformate akzeptiert die Kanalextraktion?
Hex #RGB, #RGBA, #RRGGBB und #RRGGBBAA mit oder ohne führendes #, plus CSS rgb(r, g, b) und rgba(r, g, b, a). Benannte CSS-Farben und 0x-Präfixe werden nicht akzeptiert.
Wie wird Alpha aus rgba() gegenüber achtstelligem Hex umgerechnet?
Hex-Alpha ist bereits 0–255 (zum Beispiel ist #80 gleich 128). Das rgba()-Alpha ist eine Einheit von 0 bis 1 und wird mit round(alpha × 255) umgerechnet, sodass 0.5 auf derselben Skala zu 128 wird.
Was kostet das Extrahieren eines Farbkanals?
Das Browser-Werkzeug ist kostenlos. Ungültige Farbe oder ungültiger Kanal werden nicht berechnet.
Welchen Rotwert hat die Farbe #3498db?
Er beträgt 52, denn das erste Ziffernpaar 34 ergibt im Sechzehnersystem 52. Grün liegt bei 152 und Blau bei 219; ohne Transparenzpaar gilt die Farbe als voll deckend mit 255.
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/channel-extract \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db","channel":"red"}'const res = await fetch("https://api.kit.forhosting.com/color/channel-extract", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db",
"channel": "red"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/channel-extract",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db",
"channel": "red"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/channel-extract", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db","channel":"red"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db","channel":"red"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/channel-extract", 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",
"channel": "red"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.channel_extract",
"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_color_chars | 64 |
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 und unbekannte Kanalnamen scheitern mit invalid_input und werden nicht berechnet.
Was ein Farbkanal ist und wie die Zahl entsteht
Fehlt Alpha in einer Farbe, behandelt der Extraktor die fehlende Bande als vollständig deckend 255 statt eine Lücke zu erfinden, und setzt had_alpha auf false, damit Aufrufer einen Vorgabewert von einer geschriebenen Transparenz unterscheiden. Das Extrahieren eines benannten Kanals ist danach ein Nachschlagen nach diesem Parsen: die ganze Zahl Rot, Grün, Blau oder Alpha, keine Umrechnung nach HSL, LAB oder CMYK.
Eingabevertrag, akzeptierte Formate und die Antwortform
RGB-Komponenten in Funktionsnotation liegen bei 0–255; das rgba()-Alpha ist 0–1 einschließlich und wird mit round(alpha × 255) umgerechnet. Die color-Zeichenkette darf nach dem Trimmen höchstens 64 Zeichen lang sein. Senden Sie einen JSON-Körper mit zwei Pflichtfeldern. color ist eine Zeichenkette: Hex mit drei, vier, sechs oder acht Ziffern und optionaler führender Raute, oder eine CSS-Liste rgb(r, g, b) / rgba(r, g, b, a). Aliasse hex, value, text, input und colour werden für das Feld color akzeptiert. channel muss einer der geschlossenen Namen red, green, blue oder alpha sein (der Solver nimmt die Kurzformen r, g, b und a an; das veröffentlichte Enum sind die vier vollen Wörter, damit das Webformular eine Auswahlliste ist, keine Freitextfalle). Bei Erfolg liefert der Körper value, die extrahierte ganze Zahl; channel, den kanonischen Namen; color, ein normalisiertes kleingeschriebenes Hex (#rrggbb, wenn Alpha weggelassen wurde, #rrggbbaa, wenn es geschrieben wurde); die vier ganzen Zahlen red, green, blue und alpha; scale 255; source mit der erkannten Form (hex3, hex4, hex6, hex8, rgb oder rgba); had_alpha; und eine kurze Meldung. Beispiel: color #3498db und channel red ergibt value 52, weil parseInt von 34 zur Basis sechzehn 52 ist. Beispiel: color #3498db80 und channel alpha ergibt value 128. Fehlgeschlagene Prüfung — fehlendes Feld, leere Zeichenkette, Präfix 0x, falsche Hex-Länge, Nicht-Hex-Zeichen, rgb() mit falscher Stelligkeit, rgba()-Alpha außerhalb 0–1 oder ein unbekannter Kanal wie hue — liefert invalid_input mit Feldnamen und wird nie berechnet.
Wo das Extrahieren eines Kanals seinen Nutzen hat
Weil die Umsetzung reines Parse der Stufe A ist, kostet jeder erfolgreiche Aufruf den veröffentlichten Grundpreis $0.002 ohne Modell-Tokens und ohne ausgehendes Netz, und eine fehlgeschlagene Prüfung wird nie berechnet.
Integrationsbeispiele
Fixtures für Design-Tokens und Themen
Prüfen Sie, dass ein Marken-Hex nach einer Stylesheet-Änderung noch die erwartete ganze Zahl für Rot, Grün, Blau oder Alpha hat, ohne in jedem Test einen vollständigen RGB-Konverter auszupacken.
Technische Fragen
Was geschieht, wenn Sie Alpha bei einer Farbe ohne Alpha anfordern?
Der Extraktor liefert 255 (vollständig deckend) und setzt had_alpha auf false. Dieser Vorgabewert ist dokumentiert, damit Sie eine weggelassene Bande von einem geschriebenen #ff oder 1.0 unterscheiden.