CSS-Farbname zu Hex
Der CSS-Farbname tomato entspricht #ff6347 oder rgb(255, 99, 71), genau dem Farbton, den jeder Browser malt. Machen Sie aus Farbnamen im Styleguide Hexcodes für Ihre Tokens und Tickets. Gratis in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Name
- tomato
- Rohname
- tomato
- Hex-Code
- #ff6347
- 6-stellig
- ff6347
- Widerstand (Ω)
- 255
Ein CSS-Farbname-zu-Hex-Konverter nimmt einen lesbaren benannten Farbwert der Webplattform—Wörter wie tomato, navy, coral oder rebeccapurple—und liefert den genauen Hexadezimalcode sowie die Rot-, Grün- und Blau-Kanalwerte, die Browser auflösen, wenn sie diesen Namen zeichnen. Fügen Sie einen einzelnen CSS-Bezeichner ein; das Werkzeug normalisiert die Großschreibung, schlägt den Namen in der erweiterten Named-Color-Tabelle von CSS Color Level 4 nach und liefert eine kleingeschriebene #rrggbb-Zeichenkette, ganzzahlige Kanäle von null bis zweihundertfünfundfünfzig, eine einfügbereite rgb()-Zeichenkette und schrittweise Nachschlagezeilen, die Sie in Tests prüfen können.
Was CSS-Named-Colors sind und wie Hex abgeleitet wird
Cascading Style Sheets definieren ein festes Vokabular erweiterter Named Colors, die jeder moderne Browser auf dasselbe sRGB-Tripel abbildet. Wenn ein Stylesheet color tomato oder background rebeccapurple sagt, erfindet die Engine keinen Ton: Sie löst das Schlüsselwort über eine Standardtabelle mit hundertachtundvierzig Namen—einschließlich britischer und amerikanischer Schreibweisen grey oder gray und der Level-4-Ergänzung rebeccapurple—in drei Achtbit-Kanäle auf. Diese Kanäle packen sich in die vertraute hexadezimale Form #RRGGBB, die Design-Tools, Design-Tokens und E-Mail-HTML täglich nutzen.
Für tomato liefert die Tabelle Rot zweihundertfünfundfünfzig, Grün neunundneunzig, Blau einundsiebzig, gepackt als #ff6347; für navy sind die Kanäle null, null, hundertachtundzwanzig und der Hex-Wert #000080. Unterrichtsübungen und Design-Übergaben starten oft von einem Namen in einem Marken-Deck; eine deterministische Referenz entfernt Unklarheit zu Großschreibung, Schreibvarianten und dazu, ob ein Marketingwort tatsächlich ein CSS-Schlüsselwort ist.
Praktische Tipps, Grenzen und verwandte Suchen
Senden Sie bevorzugt das exakte CSS-Schlüsselwort, das Ihr Stylesheet oder Designsystem bereits nutzt, einschließlich Camel-Style-Mischschreibweise, falls es so im Ticket steht; die Antwort normalisiert stets zu einem kleingeschriebenen name und kleingeschriebenem sechsstelligen Hex, damit nachgelagerte Diffs stabil bleiben. Übergeben Sie keine Hex-Codes wie #ff6347 und keine Funktionsnotationen wie rgb(255, 99, 71)—diese Landing ist bewusst auf Named Keywords beschränkt, und diese Formate werden abgelehnt, damit Sie es merken statt still eine Tabellenfehlstelle zu übersehen.
Transparent und currentcolor werden hier nicht auf opakes Hex abgebildet; brauchen Sie Alpha oder Systemfarben, nutzen Sie ein anderes Werkzeug. Beim Schreiben von Unit-Tests decken Sie mindestens einen gängigen Namen wie tomato, einen Level-4-Namen wie rebeccapurple, ein grey/gray-Schreibpaar, eine gemischte Großschreibung und ein bewusstes unbekanntes Wort ab, damit Validierungsregressionen nicht durchrutschen. Diese Seite richtet sich an Personen, die einen CSS-Farbname-zu-Hex-Konverter, tomato-Hex-Code, Named Color zu #RRGGBB oder rebeccapurple Hex online suchen; sie ist kein Hex-zu-RGB-Splitter, kein voller Multi-Space-Konverter für HSL LAB und CMYK und kein Palette-Extraktor aus Bildern.
Bevorzugen Sie diese Fähigkeit, wenn Sie bereits ein CSS-Schlüsselwort haben und nur den Hex-Token oder die Kanal-Ganzzahlen brauchen; ist Ihre Quelle bereits Hex, nutzen Sie stattdessen einen Hex-zu-RGB-Konverter.
Anwendungsfälle
Design-Token-Übergabe aus benannten Markenfarben
Designer listen Markenfarben als CSS-Namen in einem Styleguide; Ingenieure fügen jeden Namen ein und erhalten exakte #rrggbb- und rgb()-Werte für Tokens und Tickets.
Inhalts- und CMS-Farbfelder
Redakteure tippen tomato oder navy in ein CMS-Feld; das Backend löst das Schlüsselwort zu Hex auf, bevor CSS-Variablen oder E-Mail-Vorlagen geschrieben werden.
Häufige Fragen
Welche Farbnamen werden unterstützt?
Alle 148 erweiterten Named Colors von CSS Color Level 4, einschließlich rebeccapurple und beider Schreibweisen gray/grey, wo der Standard sie definiert. Die Großschreibung wird ignoriert.
Kann ich einen Hex-Code wie #ff6347 übergeben?
Nein. Dieses Werkzeug wandelt nur Namen in Hex um. Für Hex zu RGB nutzen Sie stattdessen einen Hex-zu-RGB-Konverter.
Sind aqua und cyan gleich?
Ja. In der CSS-Tabelle mappen beide Namen auf dasselbe Tripel (0, 255, 255) und denselben Hex-Wert #00ffff.
Welcher Hexcode gehört zu tomato?
Tomato ist #ff6347, also Rot 255, Grün 99 und Blau 71. Jeder moderne Browser stellt den Namen tomato genau in dieser Farbe dar.
Spielt Groß- und Kleinschreibung beim Farbnamen eine Rolle?
Nein. Farbnamen unterscheiden nicht zwischen Groß- und Kleinschreibung, Tomato, tomato und DarkSlateGray funktionieren gleich. Die Antwort kommt immer mit kleingeschriebenem Namen und Hexcode.
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/name-hex \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"name":"tomato"}'const res = await fetch("https://api.kit.forhosting.com/color/name-hex", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"name": "tomato"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/name-hex",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"name": "tomato"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/name-hex", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"name":"tomato"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"name":"tomato"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/name-hex", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"name": "tomato"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.name_hex",
"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_name_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
Unerkannte Namen, bloße Hex-Codes, rgb()- oder hsl()-Funktionsnotationen und mehrwortige Phrasen mit Leerzeichen scheitern mit einem klaren invalid_input-Fehler statt eine Farbe zu erfinden.
So rufen Sie die API auf und was zurückkommt
Gültige Beispiele sind tomato, Tomato, rebeccapurple, DarkSlateGray und lightskyblue; umgebende Leerzeichen werden abgeschnitten, optionale Anführungszeichen entfernt, und Buchstaben dürfen groß oder klein sein, weil CSS-Farbnamen case-insensitive sind. Senden Sie einen JSON-Body mit einem Pflicht-Stringfeld namens name—Aliase color, value, text, input und color_name werden vom selben Solver akzeptiert. Bei Erfolg liefert die Antwort name als kanonischen kleingeschriebenen Schlüssel, name_raw als die getrimmte Originalzeichenkette, hex als normalisierte kleingeschriebene #rrggbb-Zeichenkette, hex6 ohne Raute, ganzzahlige Felder r, g und b zusammen mit Aliasen red, green und blue, ein rgb-Array aus drei Zahlen, eine css-Zeichenkette der Form rgb(r, g, b), eine kurze Meldung und ein steps-Array, das den normalisierten Schlüssel und jede Kanal-zu-Hex-Zeile für Debugging oder Lehre zeigt. Fehlgeschlagene Validierung—fehlendes Feld, leere Zeichenkette, Nicht-String-Typen, Hex-Codes mit oder ohne Raute, rgb()- oder hsl()-Formen, Leerzeichen in einer Mehrwortphrase, Zeichen außerhalb A–Z, Länge über dem veröffentlichten Limit oder jede Zeichenkette, die nicht in der Named-Color-Tabelle steht—gibt invalid_input zurück und wird nie berechnet. Der Preis ist ein flaches $0.002 pro erfolgreicher Anfrage mit Einheit item und null marginalem Stückpreis.
Praktische Tipps, Grenzen und verwandte Suchen
Fehlgeschlagene Aufgaben mit invalid_input verbrauchen kein vorausbezahltes Guthaben, was explorative Skripte und Formularvalidierung günstig hält, während Lernende unvollkommene Zwischenablagewerte einfügen.
Integrationsbeispiele
Unit-Tests für Theme- und Palette-Fixtures
Nageln Sie bekannte Hex- und RGB-Tripel aus CSS-Schlüsselwörtern fest, damit visuelle Regression und Kontrastverhältnis-Tests stabile Kanalwerte prüfen.
Technische Fragen
Was passiert, wenn der Name keine CSS-Farbe ist?
Die API gibt invalid_input mit einer Meldung zurück, dass der Name nicht erkannt wurde. Für fehlgeschlagene Validierung entsteht keine Gebühr.
Ist der CSS-Farbname-zu-Hex-Konverter kostenlos?
Ja im Browser-Runner. Über die API werden erfolgreiche Umwandlungen mit einem flachen $0.002 pro Anfrage berechnet; invalid_input-Ergebnisse werden nicht berechnet.