HTML Color Codes

How to use it

1. Choose a colour with the picker, or type any value in the text field: a hex code, rgb(…), hsl(…) or a CSS name such as cornflowerblue.
2. Read the hex, RGB, HSL, HSV and CMYK values on the right and copy any of them with one click. If the colour is a CSS keyword, its name is shown; otherwise the closest keyword is suggested.
3. Set a second colour (normally the background) to see the contrast ratio and whether the pair passes WCAG AA and AAA for normal and large text; white and black are always checked too.
4. Click a swatch in the shades or tints strip to copy a darker or lighter variant, or double-click to make it the current colour.
5. Search the named-colour table by name or hex, filter by hue group, click any value to copy it or “Use” to load it into the picker. Copy the link to share the colour.

Example

How the conversions and the contrast ratio are calculated

Hex to RGB is a base conversion of each pair of digits. RGB to HSL takes the largest and smallest channel: lightness is their mean, saturation is their difference scaled by how far the lightness is from 0 or 1, and the hue is read from which channel is largest. HSV (also called HSB) uses the largest channel as value and the relative spread as saturation. CMYK is the simple screen formula (K = 1 − max channel), which is what colour pickers show; a print conversion with an ICC profile gives different numbers.

L = (max + min) / 2
S = (max − min) / (1 − |2L − 1|)
H = 60° × (G − B)/(max − min)  when red is the largest channel
    60° × ((B − R)/(max − min) + 2)  when green is
    60° × ((R − G)/(max − min) + 4)  when blue is

The contrast ratio follows WCAG 2.2: each channel is linearised (c/12.92 below 0.04045, otherwise ((c + 0.055)/1.055)^2.4), the relative luminance is 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (L1 + 0.05) / (L2 + 0.05) with L1 the lighter colour. Shades mix the colour with black and tints with white in sRGB space in 10% steps, the same way Sass darken/mix or most design tools do it.

contrast = (L_lighter + 0.05) / (L_darker + 0.05)
white vs black = (1 + 0.05) / (0 + 0.05) = 21

The 16 original HTML colours and other basics

Note the two historic quirks: in CSS green is the darker #008000 and pure green is lime; and gray (#808080) is darker than darkgray (#A9A9A9), because the “dark” variants came from the X11 colour list while gray came from HTML 3.2.

Sources: CSS Color Module Level 4 – named colors, WCAG 2.2 – contrast (minimum) and contrast (enhanced), WCAG 2.2 – relative luminance definition, Wikipedia – HSL and HSV.

Which format should you use in CSS?

All formats are equivalent for solid colours, so pick what you edit most easily: hex is the shortest and universal in design tools; rgb() is handy when a value comes from an image; hsl() lets you build a palette by changing only lightness or saturation; keywords are readable but only 148 exist. For transparency use rgb(255 0 0 / 50%), hsl(0 100% 50% / 0.5) or #FF000080. Modern CSS also supports oklch(), which is perceptually uniform but not shown here.

Questions

How many HTML colour names are there?

CSS Color Level 4 lists 148 keywords. Several are aliases of the same value (aqua = cyan, fuchsia = magenta, and the gray/grey spellings), so there are 141 distinct colours. RebeccaPurple (#663399) was the last one added, in 2014.

What contrast ratio do I need for accessible text?

WCAG level AA requires at least 4.5:1 for normal text and 3:1 for large text (at least 18 pt, or 14 pt bold) and for icons and form borders. Level AAA requires 7:1 and 4.5:1. The tool shows all four checks for your colour on white, on black and on any second colour.

Why does the CMYK value differ from Photoshop or my printer?

The tool uses the simple screen formula without a colour profile. Real print conversions depend on the ink and paper profile (for example FOGRA39 or SWOP), so the same RGB colour gives different CMYK numbers in different profiles.

Can I use a colour name instead of a hex code in HTML?

Yes: color: tomato works in every browser and is case-insensitive. Names are fine for prototypes; production stylesheets usually use hex or hsl() so that every brand colour, not only the 148 keywords, can be expressed and tuned.