Monochromatic Color Scheme
A monochromatic scheme uses a single hue in different lightness and saturation: tints (mixed toward white), tones (toward grey) and shades (toward black). It is cohesive by definition and the fastest way to look polished.
Drag the large handle. The angle between handles is the rule: 0°.
Monochromatic Color Scheme generator
| Color | HEX | RGB | HSL |
|---|---|---|---|
| #001F5A | rgb(0, 31, 90) | hsl(219 100% 18%) | |
| #0F449D | rgb(15, 68, 157) | hsl(218 83% 34%) | |
| #2F6FDE | rgb(47, 111, 222) | hsl(218 73% 53%) | |
| #6AA1FF | rgb(106, 161, 255) | hsl(218 100% 71%) | |
| #B9D3FF | rgb(185, 211, 255) | hsl(218 100% 86%) |
How to find monochromatic color scheme
Keep the hue fixed and move lightness. This tool steps lightness in OKLCH, a perceptual color space, so each step looks like the same jump; HSL steps often look uneven, especially for yellows and blues.
When to use it
- Minimal brands and product UIs.
- Background/surface layers in an interface.
- Charts showing intensity of a single measure.
Watch out for
Too little lightness range makes everything blend. Keep text at least 4.5:1 against its background, and add one contrasting accent for actions. Hue relationships say nothing about readability, so run your text colors through the WCAG contrast checker.
Example palette
Frequently asked questions
What is a monochromatic color scheme?
A palette built from one hue in varying lightness and saturation, with no other hues.
Are black and white allowed in a monochromatic scheme?
Yes. Neutrals are usually added for text and backgrounds; the scheme stays monochromatic as long as only one hue appears.
Is monochromatic the same as grayscale?
Grayscale is the special case with zero saturation. Monochromatic can use any hue.