CSS Color Name to HEX, RGB & HSL Converter
Convert any CSS color name like 'tomato' or 'steelblue' to its HEX, RGB, and HSL equivalents. Quickly look up and translate named CSS colors.
Type a CSS color name (e.g., "red", "blue", "coral")
Color Values
Enter a CSS color name to see its values
Popular CSS Colors
Click a color to select it
What Are CSS Named Colors?
CSS defines 140+ color names you can use directly in stylesheets: color: tomato;, background: steelblue;, border: coral;. These names are standardized in the CSS Color Module and work in all browsers without quotes or special syntax.
Why Use Color Names
Readability: color: firebrick; is more descriptive than color: #B22222;. Team members immediately understand the color intent.
Memorability: Easy to remember "goldenrod" is a yellow-gold color. Harder to recall that #DAA520 is the same thing.
Less typing: "navy" is 4 characters vs "#000080" at 7 characters. Small savings add up in large stylesheets.
No lookup needed: Once you know the names, you don't need to look up hex codes. "Just use coral" is faster than finding coral's hex value.
How the Converter Works
Enter a color name (like "tomato") and get its hex, RGB, and HSL equivalents. Or search by hex code to find if it matches a named color. The tool includes all 140+ CSS Color Module Level 4 names.
Common names include: red, blue, green, yellow, orange, purple, pink, brown, gray/grey variants, and more specific names like coral, salmon, turquoise, lavender.
Named Color Categories
Basic Colors (17)
The original HTML colors: black, white, red, green, blue, yellow, cyan, magenta, silver, gray, maroon, olive, lime, aqua, teal, navy, fuchsia.
Extended Colors (123+)
X11 color names adopted by CSS: aliceblue, darkblue, lightgreen, mediumorchid, papayawhip, rebeccapurple (added in CSS Color Level 4).
When NOT to Use Color Names
Precise brand colors: Your brand blue probably isn't exactly any named color. Use hex or RGB for brand accuracy.
Accessibility-critical colors: Don't assume "red" is accessible. Check contrast ratios. Named colors vary widely in lightness.
Consistent theming: Named colors are fixed values. For themeable designs, use CSS variables with hex values.
Print design: Named colors are screen-defined. For print, you need CMYK values which names don't provide.
Frequently Asked Questions
Are color names case-sensitive?
No, CSS color names are case-insensitive. Tomato, TOMATO, and tomato all work identically.
What's the difference between gray and grey?
Both work and produce the same color (#808080). CSS accepts both spellings. "Gray" is more common in American English, "grey" in British English.
Why is there a "rebeccapurple" color?
Added in 2014 to honor Rebecca Alison Meyer, daughter of CSS co-inventor Chris Coyier. It's #663399 — a specific purple she loved.
Do all browsers support all color names?
Yes, all 140+ names are supported in all modern browsers. They're part of the CSS specification and have been stable for years.
Can I use color names in JavaScript?
Yes, any CSS color works in JavaScript: element.style.color = 'tomato';. The browser parses it the same way as in CSS.
What's the closest named color to my hex?
Enter your hex code in the search. The tool finds the nearest named color by comparing RGB values. Note that most hex codes won't match a named color exactly.
Popular CSS Color Names
tomatocoralsteelbluegoldenrodturquoiselavendercrimsonrebeccapurpleOther Free Color Tools
CSS Variables Generator from Color Palette
Convert your color palette into ready-to-use CSS custom properties. Generate a clean :root variable block for any design system or theme.
HEX to RGB Color Converter
Convert HEX color codes to RGB values instantly. Simply enter any hex code and get the exact red, green, and blue values for your CSS or design work.
Web Safe Color Picker
Pick from the 216 web-safe colors guaranteed to display consistently across all browsers and devices. Ideal for legacy support and cross-platform compatibility.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.