How many named colours does CSS have?

CSS defines 147 distinct named colour keywords (148 names if you count both grey and gray spellings, plus close to 160 once every gray/grey alias is included). They come from the original SVG/X11 palette, with rebeccapurple added in CSS Color Module Level 4. This tool lists the full set with both gray and grey spellings.

Are CSS colour names case sensitive?

No. Colour keywords are case-insensitive, so Tomato, tomato and TOMATO all resolve to the same colour. Most style guides write them lowercase. This tool stores and copies them lowercase to match that convention.

What is the difference between gray and grey in CSS?

Both spellings are valid and identical. CSS accepts gray, grey, lightgray, lightgrey, darkgray, darkgrey, dimgray, dimgrey, slategray and slategrey. Pick one spelling and stay consistent across a codebase so search-and-replace stays reliable.

Should I use colour names or hex codes in production CSS?

Named colours are great for prototypes, demos and readable defaults. For brand-accurate work, hex, rgb or hsl give you exact control and support alpha (rgba / hsla). Many teams define CSS custom properties so the literal value lives in one place regardless of format.

How is the colour family filter decided?

Each colour is converted to HSL in your browser, then bucketed by hue, saturation and lightness — near-grey colours go to the gray or white group, warm low-saturation tones to brown, and the rest by hue angle. It is a practical grouping for browsing, not an official CSS classification.

Is transparent a CSS colour name?

Yes, transparent is a valid colour keyword, but it has no opaque swatch (it is fully see-through) so it is omitted from this visual list. It is equivalent to rgba(0, 0, 0, 0). The currentColor keyword is also special: it resolves to the element's text colour rather than a fixed value.

CSS Color Names — Gera Tools

A complete, searchable reference for every named CSS colour — the human-readable keywords like tomato, cornflowerblue and rebeccapurple that you can drop straight into a stylesheet instead of memorising hex codes. Each colour appears as a live swatch alongside its hex, rgb() and hsl() values, and every value has a one-click copy button. It is built for front-end developers, designers and anyone writing HTML or CSS who wants to pick a name, see exactly what it looks like, and grab the precise value in whatever format their project uses.

How it works

CSS ships with a fixed palette of colour keywords inherited from the old X11 and SVG colour lists, extended by the modern CSS Color specification. This tool hard-codes that canonical palette with its official hex values, then computes everything else in your browser: each hex is parsed to red, green and blue channels, and those are converted to HSL so the page can show the hue, saturation and lightness and group colours into families.

Searching matches against the colour name and all three value formats at once, so typing tomato, #ff6347, rgb(255 or hsl(9 all surface the same swatch. The family chips (red, orange, green, blue, gray and so on) filter the grid down to a slice of the palette when you are hunting for “a soft blue” rather than a specific name. Text labels on each swatch automatically flip between black and white based on a WCAG-style luminance check, so the name stays legible on both pale and dark colours. Nothing is uploaded — the entire palette, the colour maths and the clipboard copy all run locally, so the tool works offline and keeps your work private.

Example

Say a design hands you the swatch “that warm coral-orange”. You scan the Orange and Red family chips, spot tomato, and click its rows to copy:

HEX: #ff6347
RGB: rgb(255, 99, 71)
HSL: hsl(9, 100%, 64%)

Paste whichever your stylesheet uses. If you instead start from a value — a teammate sends #6495ed — type it into the search box and the matching cornflowerblue card appears instantly, confirming the name and giving you its rgb and hsl equivalents.

Name	HEX	RGB
tomato	`#ff6347`	`rgb(255, 99, 71)`
cornflowerblue	`#6495ed`	`rgb(100, 149, 237)`
rebeccapurple	`#663399`	`rgb(102, 51, 153)`
seagreen	`#2e8b57`	`rgb(46, 139, 87)`

Every value shown here is computed in your browser from the canonical CSS palette — no network requests, no tracking, no data leaves your device.