Monochromatic Color Palettes: How to Design with One Hue

A monochromatic palette uses a single hue and builds everything else from it: lighter tints, darker shades and grayer tones. Because every color shares the same hue, the result always feels unified. It's the calmest harmony there is, and a favorite for interfaces, minimal brands and serene rooms.

Understanding Color Harmony: 7 Ways to Combine Colors introduces monochromatic palettes as its first rule. This guide shows how to build one step by step, how to stop it from feeling flat, and how to keep text readable when every color comes from the same family.

One hue, three ways to vary it

With the hue fixed, you have three ways to create different colors from it. Each changes the color in a different direction.

• Tints add white. They make a color lighter and softer, which is useful for backgrounds and hover states.
• Shades add black. They make a color deeper and heavier, which is useful for text, headers and pressed states.
• Tones add gray. They keep roughly the same lightness but lower the saturation, making a color quieter and more sophisticated.

Our guide to shades, tints and tones explains each in more depth. For a monochromatic palette, the point is that you have a full range of light, dark and muted versions to choose from, all without changing the hue.

Build a palette step by step

1. Pick the hue and a base color

Start with the color you want people to remember, such as a brand color or the main button color. A base with medium lightness and good saturation gives you the most room to go lighter and darker.

2. Generate a range

The generator's monochromatic rule gives five steps: two shades (the base mixed 45% and 22% toward black), the base itself and two tints (mixed 35% and 65% toward white). Mixing toward black and white, rather than shifting HSL lightness, keeps every step in order from dark to light even when the base is very light or very dark.

For a full design system you'll want more steps. The Shades & Tints tool turns one color into eleven, numbered 950 (darkest) to 50 (lightest) with the base at 500, the same naming many CSS frameworks use.

3. Choose the steps you'll actually use

Few designs need all eleven. Pick a dark step for text, the base for primary actions, a lighter step for hover or secondary elements and a very light step for backgrounds. Skipping steps between roles makes each one easier to tell apart.

Keep it from feeling flat

The risk with a single hue is monotony. When every color is the same hue and similar lightness, nothing stands out, and the design feels like a gray-scale image tinted one color. These habits keep a monochromatic palette lively.

Use the full lightness range

Contrast in a monochromatic palette comes almost entirely from lightness, so use a wide range. The darkest and lightest steps of the generator palette above measure 7.52:1 against each other, plenty for text. Neighboring steps such as #4338ca and #857edd measure only 2.26:1, which is fine for a hover state but not for text.

Vary saturation with tones

Tones give you a second dimension. A muted, grayer indigo next to the vivid base reads as a different color, even though the hue hasn't changed. Use tones for large areas and keep the saturated base for the few things that matter most.

Add texture and material

In print, products and interiors, texture does what extra hues would do elsewhere. Matte against gloss, linen against velvet, or a photo against a flat panel creates variety within one hue. On screens, shadows, subtle gradients between two steps and photography play the same role.

Allow one neutral

A near-white or near-gray gives the eye a rest. Tint it slightly toward your hue so it belongs: an indigo palette might use #f6f5fc rather than pure white. Strictly speaking that makes the palette monochromatic plus a neutral, and that's what most real monochromatic designs are.

Readable text in one hue

Text needs a contrast ratio of at least 4.5:1 for normal sizes and 3:1 for large text. In a monochromatic palette, the reliable pairs are always far apart in lightness.

• White on the base #4338ca: 7.90:1, passes AA and AAA.
• White on the lighter #6259d3 (step 400): 5.39:1, passes AA.
• White on #817adb (step 300): 3.65:1, large text only.
• Dark indigo #181449 (step 900) on the lightest tint #dedcf6 (step 50): 12.69:1.
• Dark indigo #181449 on the neutral #f6f5fc: 15.69:1.

A useful rule: text and its background should be at least four or five steps apart on an eleven-step scale. Then check the exact pair, because some hues, such as yellow, get light much faster than others.

Examples

UI: an indigo app

Dark indigo for text and icons, the base for primary buttons with white labels, step 400 for hover, step 50 for selected rows and a tinted near-white for the page. The base on the page background measures 7.29:1, so it also works for links. Add red, amber and green only for errors and statuses, where meaning matters more than purity.

Branding: a forest green

A one-hue brand is easy to recognize and hard to misuse. The deep green carries the logo with white at 7.13:1, the darkest step sets text on the pale sage at 7.39:1, and on a warm off-white such as #f7f3ee it reaches 11.88:1. Packaging and stationery can switch between dark-on-light and light-on-dark versions without ever leaving the brand color.

Interiors: warm clay

Rooms suit tones more than pure shades. Pale clay walls, a terracotta armchair, a rust cushion and a grayed brown in wood or leather all share one hue, so the room feels cocooning. Texture does the rest: plaster, wool, linen and wood keep it from looking like a single paint chip. If the palette also goes on printed material, the grayed brown #6f5c4d on the warm white reaches 5.76:1.

When monochromatic isn't enough

A single hue struggles when you need several distinct categories, such as chart series or color-coded labels, or when one call to action must jump out. In those cases add one accent from another hue, or move to an analogous scheme, which keeps much of the calm with more variety.

Quick checklist

1. Pick a mid-lightness base with good saturation.
2. Generate a range, then choose four or five steps with clear roles.
3. Keep text and background far apart on the scale and check each pair.
4. Use tones and texture for variety, and the saturated base for emphasis.
5. Add one tinted neutral, and a second hue only for statuses or a single accent.