Named CSS Color to Hex
Look up the hex value of any named CSS color (e.g. 'tomato', 'steelblue', 'rebeccapurple').
How to use this tool
- Type a CSS color name (e.g. steelblue, tomato, coral).
- The tool looks it up in the W3C named color list and returns the hex and RGB values.
- Names are case-insensitive and spaces are ignored.
Look up the exact hex value for any of the 140+ named CSS colors. Type the name and get the hex code and RGB instantly.
Formula
This is a direct lookup, not a formula. The CSS Color Level 4 specification defines 148 named colors, each mapped to a fixed sRGB triplet. For example:
tomato → #ff6347 → rgb(255, 99, 71)
The R, G, B values are extracted from the hex: R = hex[1..2], G = hex[3..4], B = hex[5..6] (parsed as base-16 integers).
How it works
The input name is trimmed, lowercased, and whitespace-removed before being looked up in a hard-coded table of all 148 CSS named colors. If the name is found, the corresponding hex value is parsed into its R, G, B channels and both the hex string and an rgb() notation string are returned. Unrecognized names return 'unknown'.
Common mistake: assuming that CSS named colors are case-sensitive. They are not — 'Tomato', 'tomato', and 'TOMATO' are all valid in CSS and will resolve to the same hex value. However, some non-CSS contexts (SVG filters, JavaScript string comparisons) may be case-sensitive, so using lowercase is the safest practice.
Worked example
Look up the hex value for 'tomato'
- Normalize input: 'tomato' → trim, lowercase → 'tomato'.
- Look up in the CSS named color table: tomato → #ff6347.
- Parse hex to RGB: R = 0xFF = 255, G = 0x63 = 99, B = 0x47 = 71.
Hex: #ff6347 | RGB: rgb(255, 99, 71)
Common mistakes to avoid
- Expecting case-sensitive matching -- CSS named colors are case-insensitive, so "Tomato" and "tomato" are identical.
- Assuming all SVG 1.0 named colors are valid in CSS -- nearly all overlap, but a few legacy X11 names differ slightly in spelling between SVG and CSS4.
- Looking for "grey" variants when only the "gray" spelling (or vice versa) is remembered -- CSS4 accepts both spellings for the grey family.
Key terms
- CSS named color
- One of the 148 color keywords defined by the CSS Color Level 4 specification, such as 'red', 'tomato', 'steelblue', or 'rebeccapurple'. Each maps to a specific sRGB hex value.
- sRGB
- Standard Red Green Blue — the color space used by CSS and most screens. All CSS named colors are defined as fixed points in sRGB using 8 bits per channel.
- rebeccapurple
- A CSS named color (#663399) added to the specification in 2014 in memory of Rebecca Meyer, the daughter of web developer Eric Meyer, who died that year. It is one of the few colors added for a non-descriptive reason.
- rgb() notation
- A CSS function that specifies a color as three comma-separated integers for red, green, and blue, each in the range 0–255. For example, rgb(255, 99, 71) is equivalent to #ff6347.
Frequently asked questions
- How many CSS named colors are there?
- CSS defines 140 named colors (plus 'transparent'). They range from the basic 16 (VGA colors) to the full X11 color list.
- What is rebeccapurple?
- rebeccapurple (#663399) was added to CSS4 in memory of Rebecca Meyer, daughter of CSS Working Group member Eric Meyer.