CSS named colors
Find the right CSS named color.
Search, filter, compare, and copy fixed, special, and system color keywords with the contrast and implementation context needed to use them responsibly.
Free color utility
Named Colors
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: rebeccapurple, #663399, or rgb(102 51 153)
If input is invalid: Search text is always safe; a query with no match shows a clear empty result and keeps the filters editable.
Choose a preset or edit the controls directly.
Reference
Named color search
Instructions
- Search by CSS color name or HEX value to narrow the named color list.
- Sort results by name, hue, or lightness depending on how you want to scan the colors.
- Use the group filter to switch between all keywords, opaque colors, special keywords, and system colors.
- Set a test background and target to see which fixed named colors meet the selected text or UI contrast target.
- Inspect a named color, then copy names, values, contrast reports, or token-style handoff notes.
Opaque named colors are checked against this background. A translucent background is composited over white before scoring.
Results
Keyword cards
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Named Colors.
Methodology pages
Related guides
How it fits
From CSS keyword to usable color value.
Resolve a CSS color keyword, understand whether its value is fixed or context-dependent, and carry the right syntax and caveats into implementation.
Know what resolves
Separate the 148 fixed sRGB named colors from transparent, currentcolor, and system colors whose rendered value depends on context.
Check the real pairing
Preview fixed colors and compare their values before using them in text, surfaces, borders, or palette roles.
Free sharing
Named-color searches can be bookmarked and shared without an account, making reference results easy to revisit.
Quick overview
Hue Codex CSS Named Colors Reference is a free browser-based table for searching CSS color keywords. It includes 148 opaque named colors with fixed sRGB HEX and RGB values, plus transparent, currentcolor, and 19 current system color keywords as separate groups because their value behavior differs.
- The fixed named-color table has 148 opaque sRGB colors, including aliases such as aqua/cyan, fuchsia/magenta, and gray/grey.
- transparent is a named-color value, but it is transparent black rather than an opaque HEX color.
- currentcolor and system colors are valid CSS color keywords, but their actual used color depends on context.
- Use search, group filters, and name/hue/lightness sorting to find practical keyword values quickly.
- Copy names for readable CSS examples, or copy HEX/RGB values when fixed color values are easier to document.
What the Hue Codex CSS named colors reference does
The Hue Codex CSS named colors reference lets you search, filter, sort, inspect, and copy CSS color keywords. Opaque named colors appear as swatches with their CSS keyword, fixed HEX value, RGB value, and HSL hue/lightness detail.
The page also separates special keywords and system colors from fixed named colors. That distinction matters because transparent, currentcolor, and system color keywords do not behave like ordinary opaque swatches.
CSS named colors are standardized color keywords such as rebeccapurple, tomato, black, white, cyan, and gray that can be used anywhere CSS accepts a color value.
CSS color keyword groups
Hue Codex groups CSS color keywords by value behavior. Fixed opaque named colors can be copied as a keyword, HEX, or RGB value. Special and system keywords are useful CSS values, but they depend on transparency, inherited context, or platform color settings.
| Group | Count | Value behavior |
|---|---|---|
| Opaque named colors | 148 | Fixed sRGB keyword-to-HEX mappings. |
| Special keywords | 2 | transparent resolves to transparent black; currentcolor resolves from the element color property. |
| System colors | 19 | Resolve from browser, OS, theme, or forced-colors context. |
How to search, sort, and copy named colors
Search accepts CSS names, display names, HEX values, RGB values, groups, and descriptions. For example, blue can find blue-family names, #663399 can find rebeccapurple, and system can narrow to dynamic system color keywords.
Sorting by hue helps browse the fixed swatches like a color wheel. Sorting by lightness helps find light neutrals, dark accents, or mid-tone colors. The export panel always follows the current search, group, and sort result.
Copy the keyword
Use the Name button when readable CSS examples or quick prototypes benefit from a familiar color name.
Copy HEX or RGB
Use fixed HEX or RGB values when a color role, handoff note, or comparison table needs the numeric sRGB value.
Filter keyword groups
Switch between all keywords, opaque named colors, special keywords, and system colors to avoid mixing fixed and dynamic values by accident.
Best uses for CSS named colors
Named colors are useful for learning, quick examples, test cases, prototypes, and readable documentation. They are also helpful when you need a familiar reference point before choosing a final role value.
- Look up the exact HEX and RGB value behind a CSS color name.
- Find aliases such as cyan/aqua, magenta/fuchsia, gray/grey, and darkgray/darkgrey.
- Sort by hue or lightness when comparing named colors for examples, demos, or palette notes.
- Copy fixed keyword values for CSS snippets, documentation, QA comments, and tutorials.
- Review transparent, currentcolor, and system color keywords separately from fixed sRGB named colors.
Named color caveats
CSS named colors are convenient, but design systems usually benefit from semantic roles such as --color-text, --color-surface, or --color-danger rather than raw names like tomato or dodgerblue. A role describes the job of a color; a named color describes only a fixed value.
System colors and currentcolor are context-dependent. They can be powerful for accessibility-aware interfaces, especially with forced-colors mode, but they should be tested in the real browser and OS settings where they will appear.
Use named colors as reliable CSS keyword references, then check contrast, role naming, fit, and context-dependent behavior before publishing a final interface.
Quick answers
Named Colors FAQ
What is the Hue Codex CSS named colors reference?
Hue Codex CSS Named Colors Reference is a free browser-based table for searching, filtering, sorting, and copying CSS color keywords, including fixed named colors, transparent, currentcolor, and system colors.
How many fixed CSS named colors are there?
CSS Color Module Level 4 defines 148 opaque named colors with fixed sRGB values.
What is the difference between CSS named colors and CSS color keywords?
Opaque named colors are fixed sRGB keywords such as tomato or rebeccapurple. CSS color keywords also include special and system keywords such as transparent, currentcolor, Canvas, and Highlight.
Is transparent a CSS named color?
Yes. CSS Color 4 defines transparent as a named-color value, specifically transparent black with zero alpha rather than an opaque swatch.
What does currentcolor mean in CSS?
currentcolor is a CSS keyword that resolves to the computed value of the element color property, making it useful for borders, icons, outlines, and inherited color behavior.
Are system colors the same as named colors?
No. System colors are CSS color keywords, but their used values are dynamic and can reflect browser, operating system, theme, or forced-colors settings.
Can I copy CSS named color values?
Yes. The tool lets you copy CSS keyword names, fixed HEX values, RGB values, and the currently filtered export list.
Should CSS use named colors or color roles?
Named colors are fine for examples, prototypes, and simple CSS, but larger interfaces usually benefit from semantic color roles that describe the job of each color.