Complementary
Opposite hues. Highest contrast pairing, good for a single accent.
HEX color picker
HEX color picker
Type a hex code or pick one, and see exactly what those six digits are saying.
#3498dbclosest keyword: steelblue (approximate)
Three, four, six or eight digits. The hash is optional.
Red
3452Green
98152Blue
db219Adjust
All notations
- HEX
#3498db - RGB
rgb(52, 152, 219) - RGBA
rgba(52, 152, 219, 1) - HSL
hsl(204, 70%, 53%) - HSLA
hsla(204, 70%, 53%, 1) - HSV
hsv(204, 76%, 86%) - CMYK
cmyk(76%, 31%, 0%, 14%)approx - LAB
lab(60.16 -6.1 -42.23)approx - CSS
rgb(52 152 219)
Closest CSS keyword: steelblue approximate: #4682b4 is 12.81 ΔE away, so it is not the same colour
Tints and shades
The same hue and saturation mixed toward white and toward black. Useful for hover states, borders and disabled variants that still read as the same colour.
Harmonies
Sets built by rotating the hue. They are a starting point, not a rule. The proportions you use them in matter more than the angles.
Analogous
Neighbouring hues. Calm, low-tension schemes.
Triadic
Three hues evenly spaced. Balanced and lively.
Tetradic
Two complementary pairs. Needs one dominant colour to work.
Split complementary
The complement, split in two. Contrast without the clash.
Monochromatic
One hue at five lightnesses.
Reading a hex code by eye
A hex colour is three numbers wearing a disguise. Split the six digits into pairs and each pair is one channel, counted in base sixteen: the digits run 0 to 9 and then a to f, so ff is the largest a pair can be and equals 255.
That makes several things readable without a calculator. If all three pairs are equal the colour is a neutral grey. If the first pair is much larger than the others the colour is reddish. Codes starting with 0 or 1 are dark; codes starting with e or f are light. Doubling the first digit of a pair gets you close to its decimal value in units of sixteen: 3 is roughly 48 and 9 is roughly 144.
Where hex came from
Early web colours were written this way because a byte is exactly two hexadecimal digits, so three bytes of colour data map onto six characters with nothing left over. It stuck because it is short and unambiguous. Modern CSS also accepts rgb(), hsl(), oklch() and more, but hex is still what most design tools put on the clipboard.
When not to use hex
Hex is a poor format for adjusting a colour. Making #3498db ten percent lighter means changing all six digits, and there is no way to do it in your head. Switch to HSL for that kind of work, then convert back when you are done. The converter does it in one step.
Frequently asked questions
What does each pair of hex digits mean?
The first pair is red, the second green, the third blue. Each pair is a hexadecimal number from 00 to ff, which is 0 to 255 in decimal. So #3498db is 52 red, 152 green, 219 blue.
Why do some hex codes have only three digits?
Three-digit hex is shorthand in which each digit is doubled: #39c means exactly the same as #3399cc. It only works when both digits of every pair happen to match, so most colours cannot be written that way.
What is the eight-digit form?
A fourth pair sets opacity, from 00 for fully transparent to ff for fully opaque. #3498db80 is that blue at about 50 percent. Every current browser supports it, and it is often tidier than switching to rgba().
Does upper or lower case matter?
No. #3498DB and #3498db are the same colour to every browser and every tool. Pick one and be consistent; this page can output either.
Is a colour name the same as a hex code?
Only when it happens to be. CSS defines about 148 keywords, each equal to one specific hex value. Any other colour has no name, so this page shows the closest keyword and how far away it is rather than pretending it is a match.
Read the guide
- What is a HEX color code?Reading a hex code by eye, the shorthand form, the alpha byte, and the arithmetic underneath.
- HEX vs RGB vs HSLThree ways of writing the same colour. What each notation is good at, and when to reach for which.