Lookup color name from hex
#ff5733 comes back as tomato, the nearest named color (#ff6347), at a distance of 23.323808, so you know it is close but not an exact match. Give hex codes a friendly name without pretending they are identical. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Hex
- #ff5733
- Input hex
- #ff5733
- Name
- tomato
- Named hex
- #ff6347
- Distance
- 23.323808
A hex code is precise, but it is not always easy to describe in conversation, documentation, design reviews, or accessibility notes. This color name lookup turns a three-digit or six-digit hex value into the nearest solid CSS/X11 named color. It compares the input with the complete named-color palette using Euclidean distance across red, green, and blue channels. The result includes the matched name, its canonical hex value, both RGB triplets, the distance, and an exact-match indicator, giving you a useful label without pretending that an approximate match is identical.
Enter a valid hexadecimal color
Provide one color in the hex field. The lookup accepts the familiar six-digit form, such as <code>#ff5733</code>, as well as the compact three-digit form, such as <code>#f53</code>. A leading hash is optional, and uppercase or lowercase hexadecimal letters produce the same result.
Three-digit values are expanded in the standard way, so each digit is repeated before comparison. The input deliberately excludes four-digit and eight-digit alpha forms because opacity does not have a meaningful place in a distance calculation between solid named colors. Other CSS notations, including <code>rgb()</code>, <code>hsl()</code>, variables, and color names, are also outside this capability.
Normalize or convert other color syntaxes to a three-digit or six-digit hex value before submitting them.
Understand how the closest name is selected
The solver expands the input into red, green, and blue channel values from 0 through 255. It then performs the same conversion for every solid named color in the CSS/X11 palette. For each candidate it subtracts the candidate channels from the input channels, squares those three differences, adds them, and takes the square root.
The candidate with the smallest result is the closest color under ordinary Euclidean RGB distance. A distance of zero means the input exactly equals the named color; a larger number indicates a less exact descriptive label. RGB distance is intentionally simple and reproducible, though it is not a perceptual color-difference model: human vision does not assign equal sensitivity to every channel or brightness level.
The palette is ordered alphabetically, so ties always select the alphabetically first keyword.
Use the result without losing the original color
Treat the returned name as a convenient description, not as a replacement for the submitted value unless you explicitly want to snap colors to the CSS palette. The response preserves the normalized input hex and its RGB channels, then reports the winning name, the named color's hex and RGB channels, the numeric distance, and whether the match is exact. Keeping both sides makes reviews and transformations auditable.
A design-token report can display the friendly name beside the original token; an import pipeline can use the distance to decide whether a proposed palette substitution is acceptable; and a support tool can turn an opaque code into language that is easier to discuss. If exact visual fidelity matters, retain the original hex. If consistency with browser keywords matters more, use the named hex after applying your own distance threshold.
The calculation is pure and local: it performs no network requests, uses no random choices, and reads no clock, so it is suitable for reproducible builds and tests.
What you can do with it
Label design tokens
Add an understandable nearest CSS name beside hexadecimal tokens in a generated style guide while preserving each original value.
Review imported palettes
Measure how closely colors from an external palette correspond to standard browser color keywords before deciding whether to normalize them.
Improve color discussions
Turn an unfamiliar hex code into a stable descriptive name for issue reports, handoffs, documentation, and customer support.
FAQ
Which hex formats are accepted?
Exactly three or six hexadecimal digits, with an optional leading hash. Uppercase and lowercase are both accepted.
Does it support alpha transparency?
No. Four-digit and eight-digit alpha forms are rejected because the reference palette consists of solid named colors.
How is the nearest color calculated?
The tool minimizes Euclidean distance between the input and each named color across their red, green, and blue channel values.
Why might the name differ from what a person expects?
RGB distance is a simple mathematical metric rather than a perceptual model, and the CSS palette has unevenly distributed names.
How are equal-distance matches handled?
Names are checked alphabetically, so an exact tie consistently returns the alphabetically first CSS keyword.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/name-lookup \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#ff5733"}'const res = await fetch("https://api.kit.forhosting.com/color/name-lookup", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#ff5733"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/name-lookup",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#ff5733"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/name-lookup", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#ff5733"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#ff5733"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/name-lookup", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"hex": "#ff5733"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.name_lookup",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Enter a valid hexadecimal color
If the value has the wrong number of digits, includes non-hexadecimal characters, is empty, or is not a string, the request returns an <code>invalid_input</code> error rather than guessing. This strict boundary makes the operation dependable in automated workflows: a malformed design token cannot silently become an unrelated color.
Understand how the closest name is selected
Several CSS keywords are spelling aliases with identical RGB values, such as gray and grey, while aqua and cyan are also identical. That rule ensures that identical input produces identical output in the API and browser, across machines and over repeated calls.
Use the result without losing the original color
Browser execution is available on the page, while each automated API request costs $0.002.
Technical questions
What does an API request cost?
Each API request costs $0.002. The browser runner can perform the same deterministic lookup locally.