See colors side by side.
Rainbow chart, web-safe colors, grays and basic colors in one place. Tap any square to copy its code.
Color you tapped
Tap any square in the charts below. It is copied for you and its details appear here.
Color charts
Choose a chart. Every square is a color you can copy.
Left to right: the color family (hue). Top to bottom: from light to dark. Change the slider to make the colors stronger or softer.
On a small screen, slide the chart sideways to see all colors.
The classic 216 colors that every old screen could show exactly. Each block has one level of red; inside the block, green goes down and blue goes across.
From pure black to pure white in 18 even steps. In grays, red, green and blue are always equal.
The 16 original HTML color names. Web pages have understood these since the 1990s.
How to use this tool (step by step)
Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.
Choose a chart
- Press one of the four buttons above the chart.
- Rainbow chart is the best place to start.
- Press another button any time to switch.
Why we do this: Different charts answer different questions: the rainbow chart is for exploring, web-safe is for old systems, grays are for neutrals, and basic colors are for classic names.
Explore the colors
- Look across the Rainbow chart to move through red, orange, yellow, green, blue, purple and pink.
- Look down to move from very light to very dark.
- Move the strength slider to make colors vivid or soft.
Why we do this: Seeing many shades next to each other makes it much easier to choose than imagining a color from a code.
Tap a color you like
- Tap or click the square.
- It is copied automatically and a message appears in the corner.
- The box at the top shows its HEX, RGB and HSL codes.
Why we do this: You get the code immediately, so you can use that exact color anywhere.
Use it
- Paste the code into your website, document or design program.
- Use the codes at the top if a program asks for RGB or HSL instead of HEX.
- Open the Contrast Checker to make sure text on that color is easy to read.
Why we do this: Choosing a color is only half of the job. It must also look right and be readable where you use it.
Questions people ask
Quick answers.
What does web-safe mean?
In the early days of the web, many screens could show only 256 colors. The 216 web-safe colors looked the same on all of them. Today all screens show millions of colors, so web-safe is mostly of historical interest.
What is saturation?
It is how strong a color is. At 100% the color is pure and vivid. At 0% it becomes gray.
Why do the numbers in HEX look like 00, 33, 66, 99, CC, FF?
Those are the six equal steps that web-safe colors use for red, green and blue. 00 is none and FF is the maximum.
Can I use these colors for printing?
They are made for screens. Printed colors depend on the printer and the paper, so they can look different.