Monochromatic Color Schemes: How to Design With a Single Hue

Picking several colors that work together is hard, and many interfaces end up noisy because each new component brings its own hue. A monochromatic color scheme solves that by building everything from a single hue in different lightness and saturation levels. This guide shows you how to create a monochrome palette, assign colors to UI roles, keep text readable, and know when one hue is not enough.

What Is a Monochromatic Color Scheme?

A monochromatic scheme uses one hue, such as blue at 212 degrees on the color wheel, and creates variety by changing only two things:

• Lightness: mixing toward white produces tints, mixing toward black produces shades.
• Saturation: mixing toward gray produces tones, which are softer and more muted.

If those terms are new, our article on tints, shades and tones explains each one with examples. Note that "monochrome" in photography usually means grayscale, but in design a single color palette can be built from any hue. Many monochromatic websites also include true neutrals like white or near-gray, which keeps the single-hue character intact.

Pros and Cons of a Single Color Palette

Monochromatic schemes work especially well for documentation, portfolios, corporate sites, single-product landing pages and dashboards where content should lead. They are harder to pull off on ecommerce sites with many competing product images, where a neutral base is often safer.

How to Build a Monochrome Palette Step by Step

1. Pick one base hue. Choose a color that fits the brand, then note its HSL hue value. Working in HSL makes it easy to hold the hue fixed.
2. Create a lightness scale. Spread at least eight to ten steps from very light (around 95 to 97% lightness) to very dark (around 10 to 15%). Gaps between steps should be large enough to tell apart.
3. Adjust saturation at the ends. Very light and very dark steps often look washed out or muddy at the same saturation as the middle. Small tweaks keep the scale feeling like one family.
4. Name the steps as tokens so components reference roles, not raw HEX values.

One caution: HSL lightness is not the same as perceived lightness. Pure yellow #FFFF00 and pure blue #0000FF both sit at 50% HSL lightness, yet white text on the yellow is about 1.1:1 while white on the blue is about 8.6:1. That means a yellow or green scale needs more of its steps on the dark end than a blue or purple scale to give you usable text colors. Always judge the scale by eye and by contrast ratio, not by the lightness numbers alone.

Here is a blue scale built entirely on hue 212:

:root {
  --blue-50:  #F3F7FC; /* hsl(212, 60%, 97%) */
  --blue-100: #DDEAF8; /* hsl(212, 65%, 92%) */
  --blue-200: #BAD4F3; /* hsl(212, 70%, 84%) */
  --blue-300: #7BAFEA; /* hsl(212, 72%, 70%) */
  --blue-400: #408ADD; /* hsl(212, 70%, 56%) */
  --blue-500: #1D6DC9; /* hsl(212, 75%, 45%) */
  --blue-600: #1757A1; /* hsl(212, 75%, 36%) */
  --blue-700: #154479; /* hsl(212, 70%, 28%) */
  --blue-800: #123154; /* hsl(212, 65%, 20%) */
  --blue-900: #0D2035; /* hsl(212, 60%, 13%) */
}

You do not have to calculate this by hand. The Color Harmony Generator has a monochromatic option that returns five swatches of your base hue plus CSS, which is a fast way to see the range. For a full ramp, the Color Shades Generator outputs a 10-step lightness scale around your base hue with a WCAG badge on each swatch showing its best text color. If you work in Tailwind, the Tailwind CSS Color Generator produces an 11-step 50 to 950 scale as a config object or v4 @theme variables.

Assigning Roles in a Monochromatic UI

A scale only becomes a design system when each step has a job. Using the blue scale above:

Notice that the important pairings use steps far apart on the scale. That is the core skill in monochromatic design.

Creating Hierarchy and Accessibility With One Hue

Hierarchy without extra colors

Since hue cannot separate elements, other tools have to:

• Lightness jumps: place a dark band, such as a footer or hero in step 800 or 900, against light sections to create rhythm.
• Typography: size, weight and letter spacing do much of the work that color would otherwise do.
• Spacing and grouping: generous whitespace makes the palette feel deliberate rather than limited.
• Saturation for emphasis: the most saturated mid-tone naturally draws the eye, so reserve it for primary actions.

Keeping text readable

Adjacent steps almost never have enough contrast for text: in the scale above, step 500 on step 400 is only about 1.4:1. Here, normal-size text needs to sit about five steps away from its background: step 500 on step 50 passes at about 4.8:1, while step 400 on step 50 does not. Verify each pairing with the Color Contrast Checker, which reports pass or fail for AA (4.5:1 normal text, 3:1 large) and AAA (7:1 normal, 4.5:1 large). For more on picking text colors, see choosing readable text colors for the web.

Monochromatic Color Schemes in Dark Mode

A single-hue scale flips to dark mode cleanly because you only need to reverse which end does which job:

• Background: 900 #0D2035
• Elevated surfaces: 800 #123154
• Body text: 50 #F3F7FC (about 15.3:1)
• Links and accents: 300 #7BAFEA (about 7.2:1 on the background)

@media (prefers-color-scheme: dark) {
  :root {
    --surface: var(--blue-900);
    --surface-raised: var(--blue-800);
    --text: var(--blue-50);
    --link: var(--blue-300);
  }
}

Avoid using the saturated mid-tones for large dark-mode areas; they can feel intense on dark backgrounds. Our guide to choosing colors that work in light and dark mode covers this in more depth.

When to Break the Single-Hue Rule

Strict monochrome is a starting point, not a cage. Add other colors when:

• You need status colors. Errors, warnings and success messages should use conventional red, amber and green, paired with icons and text.
• Data visualization needs categories. A single hue works for sequential data (low to high) but not for distinguishing many unrelated series.
• Calls to action get lost. A "monochrome plus one accent" approach, such as a blue system with a single orange button color, keeps cohesion while restoring emphasis. Our best website color combinations article includes examples of both approaches.

To explore what a second hue would look like, switch the harmony type in the color harmony tool to complementary or analogous, or read the complete guide to color theory.

Conclusion

A monochromatic color scheme gives you cohesion almost for free, but it asks more of your lightness range, typography and spacing. Build a wide single-hue scale, give each step a clear role, keep text far from its background on the scale, and flip the ends for dark mode. Add status colors and, if needed, one accent, and a single color palette can carry an entire product.