148
colors shown
// 148 CSS NAMED COLORS
// browse all 148 css named colors
Browse all 148 CSS named colors with HEX, RGB, and HSL values. Search by name, filter by hue group, and copy any value in one click. Free browser-based tool, no sign-up required.
Type in the search box to filter by name, or click a hue group to filter by color family.
Click any color card to copy its value in your chosen format — name, HEX, RGB, or HSL.
Hover a card to see its full values in the detail panel on the left, or switch to list view for a compact reference.
A complete, searchable reference for all 148 CSS4 named colors. Browse by hue group, sort by name or lightness, and copy any color as its CSS name, HEX, RGB, or HSL value with one click. The full list is built into the page — no server required.
CSS Color Level 4 defines 148 named colors. This includes the original 16 basic HTML colors, the full X11 color set, and the special keyword transparent is not included here as it has no solid color value. All 148 are included in this reference with their HEX, RGB, and HSL equivalents.
No. CSS color keywords are case-insensitive. Red, red, and RED are all valid and equivalent in CSS. However, lowercase is the conventional style used in modern codebases and is what most linters and formatters will produce.
Named colors are best for quick prototyping, educational examples, and cases where the color name improves code readability (e.g. color: tomato is more expressive than color: #ff6347). For production design systems, HEX or HSL values are preferred because they map directly to design tokens and give precise control.
Both spellings are valid in CSS. gray and grey refer to the same color (#808080), as do all the variant spellings like darkgray/darkgrey, lightgray/lightgrey, and so on. This tool includes both spellings where applicable.
Yes. All 148 CSS named colors defined in CSS Color Level 4 are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. The full set has been stable and widely supported since around 2014. There is no need to provide HEX fallbacks for named colors in modern web projects.
RebeccaPurple (#663399) was added to the CSS Color Level 4 specification in honor of Rebecca Alison Meyer, the daughter of web standards developer Eric Meyer, who passed away in 2014. It is the only CSS color named after a person and holds a special place in web history.
CSS defines 148 named color keywords that can be used anywhere a color value is accepted — in color, background-color, border-color, box-shadow, SVG fill and stroke, and more. These keywords map to specific sRGB values and are fully equivalent to their HEX counterparts.
Named colors are organized into groups by hue: reds, pinks, oranges, yellows, purples, greens, blues, browns, whites, and greys. Each group contains several shades ranging from pale to deep, often prefixed with modifiers like light-, dark-, deep-, or medium-.
The first 16 named colors were introduced with HTML 3.2 in 1996: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The full X11 color set — originally defined for the X Window System in 1987 — was incorporated into CSS 2.1 as an extended set. CSS Color Level 3 formalized 147 keywords. CSS Color Level 4 added rebeccapurple, bringing the total to 148.
Named colors are excellent for rapid prototyping because they are self-documenting — reading border: 2px solid tomato is immediately clear without needing to look up a hex code. However, for design systems and production CSS, named colors have a drawback: they cannot be easily adjusted programmatically. You cannot lighten tomato by modifying its HSL lightness without first knowing its underlying values. For systematic theming, HSL values with CSS custom properties are more flexible.
A useful pattern is to use named colors during development as placeholders, then replace them with design token variables before shipping. This tool makes it easy to find the HEX or HSL equivalent of any named color so you can make that transition.