Hex Color Picker

Q: Which CSS color names are supported?

All 148 named colors of the CSS Color Module, from aliceblue to yellowgreen , including rebeccapurple . Type a name into the hex field or filter the list below the tool and click a color to select it.

Click the swatch to choose a color, or type a hex code or a CSS color name. You get every color format at once, matching tints, shades and harmonies, and an instant WCAG contrast check for white and black text.

#7C3AEDClick to pick a color

Hex color code

HEX
RGB
HSL
HSV
CMYK
CSS name

Tints and shades

Click a swatch to copy its hex code.

Color harmonies

Contrast and accessibility (WCAG)

White text on this color

Black text on this color

CSS color names

Filter color names

Private: your data is processed in your browser and never uploaded.

How to use the hex color picker

Click the large swatch to open your system's color picker, or type a hex code such as #1E90FF or a name such as tomato.
Copy the format you need: HEX, RGB, HSL, HSV or CMYK. Click any tint, shade or harmony swatch to copy its hex code.
Check the contrast boxes to see whether white or black text on your color meets WCAG level AA or AAA.

How hex color codes work

A hex color code such as #FF6347 holds three bytes: red (FF = 255), green (63 = 99) and blue (47 = 71). Each channel runs from 00 to FF, which gives 256 × 256 × 256 = 16,777,216 possible colors. Equal values produce grays – #000000 is black, #808080 is mid gray and #FFFFFF is white – and higher values make a color lighter.

Tints, shades and color harmonies

A tint is your color mixed with white and a shade is your color mixed with black. The picker shows both in 10% steps, which is handy for hover states, borders and backgrounds that match a brand color.

Harmonies rotate the hue around the color wheel while keeping saturation and lightness:

Complementary (180°) – the opposite color, for strong contrast and calls to action.
Analogous (±30°) – neighbors on the wheel, for calm and coherent palettes.
Triadic (±120°) – three evenly spaced colors, for vivid but balanced designs.

Color contrast and WCAG

The Web Content Accessibility Guidelines require a contrast ratio of at least 4.5:1 for normal text (level AA) and 7:1 for level AAA. Large text – 18 pt, or 14 pt bold – needs 3:1 for AA. The ratio compares the relative luminance of the text and background colors and ranges from 1:1 (identical colors) to 21:1 (black on white).

Frequently asked questions

What are hex color codes?

A hex color code describes a color with six hexadecimal digits: two for red, two for green and two for blue, for example #FF6347 (tomato). CSS, HTML, design tools and image editors all understand them.

How many colors can a hex code represent?

256 × 256 × 256 = 16,777,216 colors. With an extra alpha pair (#RRGGBBAA) each of them can also have 256 levels of transparency.

Which CSS color names are supported?

All 148 named colors of the CSS Color Module, from aliceblue to yellowgreen, including rebeccapurple. Type a name into the hex field or filter the list below the tool and click a color to select it.