Monochromatic Color Wheel
Monochromatic schemes keep one hue and vary the lightness. Use the lightness slider to walk the shade range of your base color.
One hue with varied lightness — clean and unified.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
- Random Color Generator
Generate a random HEX color, a lockable five-color palette, or a two-color CSS linear gradient. Copy HEX, RGB, HSL, and CMYK.
How this harmony sits on the wheel
A monochromatic scheme keeps one hue and changes lightness. On this wheel the hue marker stays put while the lightness control walks from a light step to a dark step. That is the whole scheme: one position on the wheel, many values.
This is the safest structure for a product UI. Borders, surfaces, and text can share a hue and still separate if their lightness differs enough. It is also the easiest scheme to get wrong by staying in the middle of the range, where every step looks like the same gray-blue and none of them pass as text on another.
Saturation can stay high while lightness changes, or you can drop saturation on the large surfaces so the saturated step is reserved for the accent. The palette generator’s monochromatic mode outputs a set of steps you can export. The tint and shade tool builds a longer 50–950 ramp from one hex.
One hue does not mean one contrast ratio. A light step of the hue on a white page can fail, while a dark step of the same hue passes. Measure the pair you will actually ship.
The relationships are introduced in color theory 101. Explore every rule on the main color wheel, or lock swatches in the monochromatic palette generator. Named swatches live in the color index.
FAQ
Frequently asked questions
Questions about the monochromatic color wheel.
- What is a monochromatic palette?
- One hue at several lightness levels. Hue, saturation, and value are defined in color theory 101.
- How is this different from a tint and shade scale?
- The wheel shows the hue relationship. The tint and shade generator builds an eleven-step ramp, and the monochromatic palette generator keeps five steps you can export.
- Why do some steps look identical?
- If saturation is low, lightness steps are the only difference, and small steps are hard to see. Increase the lightness gap before you add a second hue.
- Which step should be body text?
- A dark step on a light surface, or the reverse, after the contrast checker shows the ratio you need. The middle step is rarely the text color.