A CMYK color chart with codes is a reference table that pairs each color with its identifying numbers, and for browser and CSS work the most reliable starting point is the 148 CSS named colors rather than a memorized set of process-color percentages. The HTML Color Names Chart lists every opaque named-color keyword standardized in CSS Color 4 alongside its exact lowercase #RRGGBB value, decimal rgb() reading, and a rendered swatch. Every row is a stable, copy-ready color token: paste the HEX into a stylesheet, compare it against the W3C specification, or hand it to a teammate without ambiguity. The keyword layer also makes the chart runnable in reverse — type a fragment like gold to surface matching swatches, or paste #ff00ff to confirm the keyword (it is both fuchsia and the alias magenta). Standardized aliases are preserved as separate rows rather than collapsed, because each spelling is a valid CSS identifier that can appear in production stylesheets. Nothing leaves the browser; the table renders and copies locally with no network calls.

What HTML/CSS Color Codes Actually Are
The phrase "cmyk color chart with codes" suggests printable process colors, but most web and CSS workflows stop well short of cyan, magenta, yellow, and black channels. The codes you actually paste into a stylesheet come in three forms:
- #RRGGBB is a six-digit lowercase hexadecimal string. The first two digits are red, the next two green, the last two blue, each running from 00 to ff (0–255). The chart always returns this in lowercase per CSS grammar.
- rgb(r, g, b) expresses the same information as three decimals, for example rgb(255, 0, 0). Some stylesheets also accept percentage syntax such as rgb(100%, 0%, 0%), but the chart only matches complete rgb(255, 0, 0) strings exactly.
- The CSS keyword itself, like red, tomato, or rebeccapurple, is just shorthand; the browser resolves it to a HEX before drawing anything.
CSS Color 4 defines 148 opaque keywords plus two special-purpose identifiers (transparent and currentColor) that the chart deliberately leaves out. The named-color section of the W3C CSS Color 4 specification is the canonical source for those 148 rows; the chart mirrors that list in stable order so a search for rebeccapurple returns the same value as the specification.
Search the Chart by Code Instead of by Keyword
Most reference tables on the web assume you are starting from a color name and want the code. The HTML Color Names Chart is built the other way around too. Paste #3366cc into the filter and the table narrows to one keyword — royalblue — with its matching rgb(51, 102, 204) shown in the same row. Type a complete rgb(255, 215, 0) and the chart returns gold. This reverse direction is the main reason designers and front-end developers keep the chart open during a styling session: it answers "what is the exact name behind this hex?" in a single keystroke, and it never invents synonyms. A short numeric fragment like 255 returns no match rather than guessing a nearby channel value, so you can trust the single row that does appear.
Find the CSS Name Behind Any HEX or rgb() Value
- Open the HTML Color Names Chart and locate the filter input above the table.
- Type a keyword fragment to browse by name, paste an exact #RRGGBB to match one color, or paste a complete rgb(r, g, b) string.
- Review the matching standardized keyword, the rendered swatch, the lowercase HEX, and the decimal rgb() reading in the same row.
- Click the HEX cell to copy the exact value to your clipboard; if clipboard permission is denied, select and copy the visible text manually — no hidden format is added.
- Clear the filter input to restore the full 148 rows in specification order.
The chart shows a no-match message rather than substituting a nearby color when nothing fits. Results stay in ASCII alphabetical order by keyword, which is how the W3C table lists them. A search beginning with # always uses exact HEX matching, so leaving off a digit yields zero results instead of a false positive. The dataset invariants — 148 rows, 148 unique keys, six lowercase hex digits per value — guard against missing entries and transposed channels during maintenance.
How the 148 Opaque Rows Are Organized
Each row of the HTML Color Names Chart contains one CSS keyword, one lowercase #RRGGBB value, one decimal rgb(r, g, b) reading, and a rendered swatch. The 148 figure comes straight from the CSS Color 4 named-colors list, which the MDN named-color reference mirrors in detail. Rows for transparent and currentColor are excluded on purpose. transparent resolves to a transparent black rather than a fixed opaque swatch, and currentColor depends on each element's computed color property, so neither has a single HEX you can copy. Including them in the count would have produced a misleading numeric mapping.
Standardized aliases remain separate rows rather than being collapsed. Both aqua and cyan map to #00ffff; both fuchsia and magenta map to #ff00ff. American and British spellings of several grays also coexist — gray/grey, dimgray/dimgrey, lightgray/lightgrey, and so on. They look like duplicates, but each spelling is a real CSS identifier that may appear in a legacy stylesheet you are maintaining, so the chart preserves them as the specification does. Filtering never merges aliases, never converts colors to another space, and never invents fuzzy synonyms.
Why Two Names Can Map to the Same HEX
CSS Color 4 deliberately lists certain keywords as aliases for the same sRGB value. The chart keeps them on separate rows so you can confirm each spelling independently. Here is a concrete reference:
| Keyword | Lowercase HEX | rgb() reading |
|---|---|---|
| aqua | #00ffff | rgb(0, 255, 255) |
| cyan | #00ffff | rgb(0, 255, 255) |
| fuchsia | #ff00ff | rgb(255, 0, 255) |
| magenta | #ff00ff | rgb(255, 0, 255) |
| gray | #808080 | rgb(128, 128, 128) |
| grey | #808080 | rgb(128, 128, 128) |
Both names in each pair are valid CSS identifiers. A legacy stylesheet that uses aqua and a new design system that uses cyan render identically; the chart simply confirms it. Whether you choose to deduplicate names in your own codebase is a style decision, not a color decision. The same principle applies to the gray/grey pairs: the chart documents the duplicate mapping instead of hiding it.
Translating a HEX Back to a CMYK Code
The keyword "cmyk color chart with codes" usually signals a printable palette in process percentages. CSS named colors are defined in sRGB, so translating a named color to CMYK requires an uncalibrated conversion whose accuracy depends on the destination press, paper, and profile. The HTML Color Names Chart stays in sRGB and never converts to cyan, magenta, yellow, or black on the page. For an approximate CMYK percentage, paste the copied HEX into the related converter tool — that is a separate workflow built for the print side, not a column inside the named-color table.
A practical sequence: open the chart, search a keyword like crimson to confirm its HEX is #dc143c, copy that value, and feed it into the print converter to read off an approximate cmyk(0%, 91%, 72%, 14%). The four-channel number is a starting point only — it cannot tell you what the ink looks like on a specific press without a color profile. Treat the CMYK figure as an uncalibrated baseline and verify with a hard proof before publishing.
When to Reach for a Different Tool
The HTML Color Names Chart is a reference, not a generator. Reach for another tool when your task shifts outside its scope:
- You need actual CMYK percentages. Use a dedicated RGB→CMYK or CMYK→RGB converter for screen-to-print translation.
- You are building a palette around a base color. Use a complementary, analogous, or triadic palette generator instead of staring at the 148 rows.
- You are checking legibility. Use a contrast checker against WCAG AA or AAA ratios; a named color alone cannot answer contrast questions about a foreground-background pair.
- You need the legacy 216-cube. Open the web-safe colors reference if you are maintaining an old stylesheet that targets the 216-channel palette.
- You are sampling an image's average HEX. Use an image-color sampler instead of trying to match by eye.
The chart makes no claim about perceptual evenness, scientific taxonomy, accessibility rating, or whether your monitor reproduces a physical pigment. Some neighboring CSS names look surprisingly similar, and some names do not describe relative lightness consistently. Its single job is to give you one stable mapping per CSS keyword and let you copy it. For a deeper tour of CMYK-side workflows built from the same 148 names, see CMYK Color Codes and Their CSS Named Color Equivalents, which goes in the opposite direction from keyword to printable percentage.
Related reading: Generate Random Color in Python: Code & Tool Options.
Related reading: Convert RGB to CMYK for Printing: Avoid Common Pitfalls.