Color codes
886 color reference pages. Each one lists HEX, RGB, HSL and CMYK values, contrast ratios against black and white, a lightness scale and a set of harmonies. Need a specific color? Use the color converter.
Looking up a colour by name? All 141 CSS keywords with their hex codes and the contrast figure a picker leaves out.
Working in Tailwind CSS? Every hue as a scale of eleven shades, with the contrast figure that decides which of them can carry text.
What a contrast ratio is, and the four numbers worth knowing
Contrast is the ratio between the light two colours reflect, and it runs from 1:1 for two identical colours to 21:1 for black on white — that is the ceiling, and nothing beats it. Four points on that scale carry rules:
| Ratio | Passes | For |
|---|---|---|
| 3:1 | WCAG AA | Large text — 18.5px bold or 24px regular and up — and the edges of buttons and inputs |
| 4.5:1 | WCAG AA | Body text, which is the threshold most designs are judged against |
| 7:1 | WCAG AAA | Body text where the standard is stricter, such as public-sector sites in some jurisdictions |
| 21:1 | — | Black on white. There is nothing higher. |
The ratio is symmetrical, and that catches people out. A colour at 4.5:1 against white is the same 4.5:1 whether the colour is the ink or the background — there is one pair and one number, so a palette cannot pass one way and fail the other.
What is not symmetrical is how it reads. Light text on a dark ground appears to bleed outward at the edges, an effect called halation, which thins the apparent stroke and hurts small or light weights more than the same contrast does the other way round. The ratio says the combination is allowed; it does not say the two directions look alike, and a caption that works as dark ink often wants a heavier weight when it is reversed out.
Reading a hex code
A hex colour is three bytes written in base 16: #RRGGBB, each pair from 00 to FF, which is 0 to 255. #FF0000 is red at full strength with no green and no blue. The three-digit form #F00 is the same colour — each digit is doubled, so #ABC means #AABBCC — which is why only colours whose pairs happen to repeat can be written short.
That also explains a thing people notice and mistrust: there are 16,777,216 hex colours, and the shorthand reaches only 4,096 of them.
Why the same hex looks different on two screens
A hex code is not a colour, it is an instruction to a display, and the display decides what to do with it. The web assumes sRGB unless told otherwise; a wide-gamut monitor showing the same numbers without colour management renders them more saturated, and a phone in a warm night mode shifts them again.
Nothing on this site can fix that, and it is worth knowing before spending an afternoon matching a screen to a print sample. For print, the CMYK figures here are a conversion and not a proof — the printer's own profile is the only authority on what will come off the press.
CSS named colors
All color pages
- #5F9EA0
- #228B22
- #40E0D0
- #1877F2
- #2563EB
- #EF4444
- #EAB308
- #14B8A6
- #F43F5E
- #F8FAFC
- #7289DA
- #00D084
- #FFFDD0
- #155E75
- #1D4ED8
- #3F3F46
- #92400E
- #A1A1AA
- #C084FC
- #C4B5FD
- #C7D2FE
- #FACC15
- #FECDD3
- #DF2020
- #FF794D
- #D2A679
- #4D401A
- #86862D
- #FFFF99
- #AFDF20
- #A6BC8F
- #A6D279
- #C6D9BF
- #BFE6B3
- #50DF20
- #79FF4D
- #169C16
- #00661A
- #1A4D40
- #00FFBF
- #609F9F
- #4DFFFF
- #60809F
- #2D5986
- #4DA6FF
- #B3BFE6
- #0040FF
- #4D79FF
- #9999FF
- #2D2640
- #5900B3
- #CC99FF