Distinct colors that match
Get several different colors on one level of lightness and saturation. They look like one set on icons, tags, charts and slides.
Click a color to copy its HEX.
How they look together
- Home
- Messages
- Calendar
- Files
- Photos
- Music
Code
#ea6a64
#bf9000
#4db155
#00acba
#6793fa
#c972ceCheck your colors
Paste the colors you already use, one per line or separated by spaces. You will see whether they sit on one level and get a fixed set with the same hues.
Questions and answers
Why do colors with the same HSL lightness look uneven?
HSL treats every hue alike, but the eye does not: yellow and green look much lighter than blue at the same HSL numbers. This tool works in OKLCH, where equal lightness looks equal, so a set of icons or chart bars has no accidental standout.
How many distinct colors can people tell apart?
In a chart or a legend most people tell 6 to 8 colors apart quickly. Up to 12 still works with labels next to the colors. For more categories, group the small ones or add labels, patterns or icons.
Which look should I choose?
Pastel and Soft suit tag and badge backgrounds with dark text. Bright and Rich suit icons, chart bars and lines on a white page. Deep and Dark suit tiles with white text and accents on dark themes.
Can I put text on these colors?
Yes. The preview picks black or white text for each color. Light looks take dark text, deep looks take white text. For body text, check the exact pair in the contrast checker.
Are equal-lightness colors safe for color blindness?
Colors on one level differ only by hue, which is the hardest part for people with color blindness. In charts add labels or patterns, or check the set in the color blindness simulator. For icons with text labels it is usually fine.