Color Names Guide Beyond Basic Colors The Complete HTML CSS Named Colors Reference — and Why You Should Know More Than Just Red Green Blue

You write CSS and need a shade of blue. You type background-color: blue; The result is a harsh, saturated, #0000FF blue that looks like it was designed in 1995. You wanted a softer, more elegant blue. You open a color names reference and discover: cornflowerblue (#6495ED — a soft, muted blue), steelblue (#4682B4 — a professional, gray-blue), lightsteelblue (#B0C4DE — a pale, airy blue), and cadetblue (#5F9EA0 — a teal-leaning blue). You did not know any of these existed. You have been writing hex codes for colors that already have names.

CSS supports 148 named colors. Most developers know about 10. Here is the complete reference, grouped by usefulness, and when to use named colors vs hex codes.

The Most Useful Named Colors You Are Not Using

Warm neutrals: cornsilk (#FFF8DC — a warm, off-white that is easier on the eyes than pure white), linen (#FAF0E6 — a slightly warmer off-white), oldlace (#FDF5E6 — a warm, vintage white). These are better than white for backgrounds that will be read for extended periods. Pure white creates glare. Warm off-whites reduce eye strain.

Sophisticated colors: crimson (#DC143C — a deep, rich red), goldenrod (#DAA520 — a dark gold, not the bright yellow of gold), indigo (#4B0082 — a deep purple-blue), teal (#008080 — a blue-green that works beautifully for accents). These are more sophisticated than the primary colors (red, blue, green) and convey a more professional design sensibility.

Neutral grays: gainsboro (#DCDCDC — a light gray), silver (#C0C0C0 — a medium gray), darkgray (#A9A9A9 — a darker gray), dimgray (#696969 — a very dark gray), slategray (#708090 — a blue-gray). Grays are the most-used colors in web design after white and black. Knowing the named grays means you can write readable CSS without a color picker.

When to Use Named Colors vs Hex Codes

Use named colors for: quick prototyping (typing tomato is faster than looking up #FF6347), learning and teaching (named colors are easier to remember and discuss), and CSS that you want to be readable at a glance (background: linen; communicates the intent better than background: #FAF0E6;).

Use hex codes for: production CSS (hex codes are more precise and consistent across teams), design systems (brand colors should be defined as hex or HSL, not named colors), and any color that needs to match a specific brand or design specification. Named colors are a convenience. Hex codes are the standard.

The color names tool is a reference — search for a color by name, see its hex code, and browse the complete list of 148 CSS named colors. It is the tool you open when you know what color you want but not what it is called, or when you know the name but not the hex code. Bookmark it. You will use it more than you expect.