Color Name and Hex Finder | Find any color name or hex code

Find the hex, RGB and HSL values for any color name, or the nearest named color for any code. Includes shades, tints and WCAG contrast ratios for all 148 CSS colors.


Type a colour name, or paste a hex, RGB or HSL value. All four formats work.
Clear

Every named CSS colour

All 148 colour names built into CSS, with their hex and RGB values. Click any row to open it above.

How hex colour codes work

A hex code is just three numbers written in base 16: how much red, how much green and how much blue, each from 00 to FF. So #FFD700 means red at full strength, green at 215 out of 255, and no blue at all, which your eye reads as gold. The two-digit pairs are the only thing that matters, which is why #FFF and #FFFFFF are both white.

Hex, RGB and HSL compared

All three describe the same colours, they just carry different information. Hex is compact and the usual choice in CSS. RGB is the same numbers in decimal, which is easier to compute with. HSL separates hue from saturation and lightness, so it is far easier to build a palette by hand: keep the hue, change the lightness, and you have a matching shade.

Why contrast matters

Text has to stand out from its background enough to be read by people with low vision or on a dim screen. The accessibility guidelines set a ratio of 4.5 to 1 for normal text (AA) and 7 to 1 for the stricter AAA level. Large text is allowed 3 to 1. This tool works out the ratio against both white and black so you can see immediately which one to put on top.

Useful to know

  • CSS has 148 named colours, and several are duplicates: grey and gray, and aqua and cyan, are identical.
  • Shorthand hex only works when each pair repeats, so #FFCC00 can be written #FC0 but #FFD700 cannot be shortened.
  • Adding two more hex digits sets transparency, so #FFD70080 is gold at about half opacity.
  • To build a palette, keep the hue in HSL and vary only the lightness. The colours will always look related.

Frequently asked questions

The CSS colour named gold is #FFD700, which is rgb(255, 215, 0). It is a bright yellow-gold rather than a metallic tone, since a flat colour cannot reproduce the sheen of real gold. For a deeper metallic look, designers usually pair it with darker golds such as #B8860B, which CSS calls darkgoldenrod.

Type the name into the box above and you get the hex, RGB and HSL values together. This works for all 148 named CSS colours, and it also works in reverse: paste a hex code and it tells you the nearest named colour along with its exact distance.

They carry exactly the same information in different notation. Hex writes each of the three channels as two base-16 digits, so #FF7F50 is red 255, green 127, blue 80. RGB writes those same numbers in decimal as rgb(255, 127, 80). Neither is more accurate; hex is just shorter to type in CSS.

Hue, saturation and lightness. Hue is the position on the colour wheel from 0 to 360 degrees, saturation is how vivid the colour is, and lightness runs from black at 0% to white at 100%. It is the most practical format for designing, because keeping the hue and changing only the lightness produces a set of shades that obviously belong together.

There are 148 named colours in the CSS specification, including transparent. Several names refer to identical values, notably grey and gray, and aqua and cyan, and magenta and fuchsia. The full list with hex and RGB values is on this page.

The accessibility guidelines ask for at least 4.5 to 1 for normal body text and 3 to 1 for large text, which is level AA. The stricter AAA level asks for 7 to 1. This tool calculates the ratio of your colour against both white and black and tells you which passes, so you can pick the readable option straight away.

Yes. An eight-digit hex code adds two digits of alpha on the end, where 00 is fully transparent and FF is fully opaque. So #FF000080 is red at roughly 50% opacity. Every current browser supports it, though the older rgba() notation is still very common.

Because the 148 named colours are a tiny sample of the roughly 16.7 million a screen can show. If your value is not one of those exact points, this tool finds the closest named colour by measuring the distance between the two in RGB space, and tells you it is an approximation rather than a match.

What is the hex code for a colour?

Type a colour name and get its hex, RGB and HSL values at once, or paste any code to find the nearest named CSS colour. Gold is #FFD700, coral is #FF7F50 and teal is #008080. Every result also shows shades, tints and the contrast ratio against black and white.