Browsers have understood a fixed set of color names since the earliest days of CSS. Type coral or steelblue into a stylesheet and it works, no hex code required, because that name is standardized and every browser agrees on exactly what it means. This page lists all 141 of them, search by name or hex, filter by color family, and copy whichever format your code needs.
What this tool does
It shows the complete list of CSS named colors, the standardized keywords defined in the CSS Color Module that every modern browser recognizes, alongside each one's hex and RGB values. Search narrows the list by typing part of a name or a hex code. The family filter groups colors the way a designer would think about them, reds, blues, greens, and so on, rather than the arbitrary order they happen to be defined in the spec. Click any hex or RGB value to copy it straight to your clipboard.
How to use it, step by step
- Scroll the full list, or narrow it with the search box, typing a color name like "teal" or a hex fragment like "4682".
- Use the family dropdown to jump straight to a group, Blue or Green, for instance, if you know roughly which color you want but not the exact name.
- Each swatch shows the color itself alongside its name, hex code, and RGB value.
- Click the hex value to copy it, or click the RGB value to copy that format instead.
- Paste directly into your CSS, design tool, or codebase, the copied value is ready to use as-is.
Who this is for
Frontend developers writing quick CSS without opening a separate design tool use this to grab a named color's exact hex value without guessing at the spelling or the shade. Designers translating a mockup into code check whether a color they picked matches one of the standard named keywords, which keeps a stylesheet more readable than a page full of unlabeled hex strings. Students learning CSS use it as a reference while working through exercises that call for named colors specifically. Anyone comparing two similar-looking colors, teal against steelblue, say, can look at both swatches side by side instead of trying to hold the difference in their head.
Where these names come from
The list is not arbitrary and it is older than CSS itself. Most of these names trace back to the X11 color system, a naming convention built for Unix graphical displays in the 1980s, long before the web existed. When CSS needed a way to reference colors by name instead of raw hex values, it adopted a large chunk of that existing X11 list rather than inventing a new one from scratch. That history explains some of the odder entries, PapayaWhip and BlanchedAlmond are not colors a web designer invented, they are decades-old X11 names that happened to survive the transition into web standards intact.
The CSS Color Module has extended the list slightly since then. RebeccaPurpleis the newest addition, added in CSS Color Module Level 4 as a tribute to Eric Meyer's daughter Rebecca, who died in 2014 at age six. It is a real, functional CSS color keyword you can use in any modern browser, not a symbolic gesture without technical substance, and it sits in the list here alongside the rest.
Named colors versus hex codes
A named color and its equivalent hex code produce an identical result on screen, tomato and #FF6347 are the same color as far as a browser is concerned. The difference is entirely about how the code reads to a human. color: tomato; tells another developer what the color looks like without them checking a reference. color: #FF6347;tells them nothing until they look it up or paste it into a preview tool.
Named colors run out fast in practice, though. A brand's exact shade of blue almost never lines up with one of these 141 fixed options, so most production stylesheets end up mixing named colors for quick prototyping or default states with hex or RGB values for anything brand-specific. If you already have a hex value and need the matching RGB numbers, or the reverse, the hex to RGB converter handles that conversion directly instead of requiring you to find the closest named match.
Why 141, not a rounder number
The CSS specification defines 140 named colors plus RebeccaPurple, and no, the count is not a clean 150 or 200 for a reason anyone has documented. The original X11 list this set draws from grew organically over years of different contributors adding colors they needed for specific displays and applications, not from a single designer sitting down to build a balanced, evenly spaced palette. CSS inherited that history rather than curating it down to a rounder number, which is why the list feels uneven in places, dozens of blues and greens, comparatively few oranges and purples.
Two pairs in the list are worth calling out specifically because they are identical, not merely similar. Aqua and Cyan both resolve to the exact same hex value, #00FFFF, and so do Fuchsia and Magenta, both #FF00FF. These are not near-matches that happen to look close, they are the same color with two different names, a leftover from CSS merging separate naming traditions that had already settled on different words for the same shade before the web standardized anything.
Common naming mistakes worth knowing
A few names read as one color but mean another. DarkGray is, somewhat famously, lighter than plain Gray, which trips people up constantly since the naming convention elsewhere in the list has Dark consistently mean darker. Fuchsia and Violet are frequently confused for the same shade despite being visibly different once placed side by side, fuchsia sitting closer to pure magenta and violet leaning noticeably more blue. Spelling matters too: Grey with an E is not a recognized CSS keyword on its own for most of the palette, only Gray and a small handful of compound names accept both spellings, so a typo here can silently fail to apply any color at all rather than throwing a visible error.
Building a palette from named colors
Named colors work well as a starting point for a quick prototype or a personal project where matching an exact brand color does not matter yet. Picking three or four names from the same family,SteelBlue, CornflowerBlue, and LightSteelBlue, for instance, gives you a coherent, related set of blues without opening a color theory tool or calculating harmonies by hand. The family filter on this page is built for exactly that kind of browsing, scanning one hue group at a time to see the full range of light-to-dark options CSS already has a name for.
Once a project moves past the prototype stage, most teams migrate away from named colors toward a defined set of hex or RGB values tied to a design system, since a brand's exact palette rarely lines up with what CSS happens to have pre-named. If your project is at that stage, the hex to RGB converter and the underlying math it is built on, covered in more depth in the binary to decimal converter article, are the next tools worth reaching for.
A note on browser support
Every color on this list works in every current browser, this is not a case of checking compatibility tables before using one. The CSS Color Module keywords have been stable and universally supported for years. The one exception worth knowing is RebeccaPurple, which arrived later than the rest and needs a reasonably modern browser, though at this point that covers effectively every browser still in active use.
Reading the family groupings
The family filter sorts colors the way most people think about them, not the way the CSS spec orders them. Reds run from the deep, muted DarkRed through bright Crimson to soft, pale LightSalmon. Blues stretch from near-black Navy through vivid DodgerBlue to pale, almost-white PowderBlue. Within a family, name prefixes carry real meaning: Dark and Lightmark a color's position on the shade scale, Medium sits between two more extreme versions of the same hue. Once that pattern clicks, guessing at an unfamiliar name gets noticeably easier, a color called DarkOliveGreen is exactly what it sounds like, a deeper, more muted version of standard olive green.
A quick word on accessibility
A named color that looks fine as a decorative accent can fail badly as text on a background, the name alone tells you nothing about contrast. LightYellow text on a White background is close to unreadable no matter how pleasant both colors look individually. Before locking a named color into a design as body text or a button label, check its contrast ratio against the background it will sit on. Picking a pretty name off this list is the easy part, confirming it is legible is the part that matters for anyone using the site.
Frequently asked questions
Beyond pure black (#000000) and white (#FFFFFF), commonly referenced named colors like Tomato (#FF6347), SteelBlue (#4682B4), and Crimson (#DC143C) show up often in design work since they come from the standard CSS named color list and have recognizable names attached.
Yes, the names shown alongside each hex code come from the standard CSS extended color keyword list, so a name like SteelBlue is not just descriptive, it is a valid value you can use directly in CSS as steelblue instead of the hex code.
Browse or search the list for the closest named color, then fine-tune from there, or use a color picker tool if you need to match an exact shade rather than a named reference point.
Yes, click any color entry to copy its hex code, ready to paste into CSS, a design tool, or anywhere else that accepts a hex value.
CSS color names come from a mix of historical X11 color naming conventions and later additions, which is why the list includes both common names like Red and more unusual ones like PapayaWhip or BlanchedAlmond, names that stuck around from decades-old display standards.