# Monochromatic color scheme: one hue, a whole identity

[Canonical HTML page](https://gradiently.design/guide/monochromatic-color-scheme)

One hue sounds limiting until you see how much range lives inside it. Built properly, a single colour can cover backgrounds, text, buttons and gradients, and look more distinctive than a rainbow.

## The short version

- A monochromatic color scheme uses a single hue in a range of lightness and saturation, built from tints, shades and tones.
- A tint is a hue mixed with white, a shade is a hue mixed with black and a tone is a hue mixed with grey.
- A useful monochromatic ramp has around nine or ten steps from near-white to near-black, evenly spaced in perceived lightness.
- Shifting the hue slightly towards the light and dark ends keeps a monochromatic palette from looking lifeless.
- Monochromatic palettes make calm, cohesive gradients, but slow single-hue blends band easily and benefit from fine grain.

A **monochromatic color scheme** uses one hue and nothing else, varied in lightness and saturation. Think of navy, cobalt, sky and ice: all blue, all clearly related, and enough contrast between them to handle backgrounds, text and highlights. Because every colour shares the same hue, a monochromatic palette always looks unified. The work is in building enough range inside that one hue.

This guide covers the three ways to vary a hue, how to build a ramp you can actually design with, and how monochrome works in gradients. For the wider context, see [colour theory basics](https://gradiently.design/guide/color-theory-basics).

## Tints, shades and tones

Every colour in a monochromatic palette comes from one of three moves. A **tint** adds white, making the colour lighter and softer. A **shade** adds black, making it deeper. A **tone** adds grey, making it quieter without changing its lightness much.

- Tints: towards white: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Shades: towards black: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Tones: towards grey: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

One blue, three directions. Most monochromatic palettes use all three.

## How to build a monochromatic palette

A handful of random tints is not a palette. What you want is a ramp: a sequence of steps from near-white to near-black, evenly spaced so that each step looks as different from its neighbour as the last. Nine to eleven steps is a common size, and it is what most design systems use.

- Teal 50: #f0fdfa
- Teal 100: #ccfbf1
- Teal 200: #99f6e4
- Teal 300: #5eead4
- Teal 400: #2dd4bf
- Teal 500: #14b8a6
- Teal 600: #0d9488
- Teal 700: #0f766e
- Teal 800: #115e59
- Teal 900: #134e4a

A ten-step teal ramp. Light steps for backgrounds, middle steps for colour, dark steps for text.

1. **Choose the core hue** Pick the version of the colour you like most at full strength. It becomes the middle of the ramp.
2. **Set the ends** Choose a near-white with a hint of the hue and a near-black with a hint of the hue. Avoid pure white and pure black; they look disconnected.
3. **Fill the steps by lightness** Space the steps by how light they look, not by equal hex or HSL values. Perceptual spaces like OKLCH make this easy; see [OKLCH gradients](https://gradiently.design/guide/css-gradient-oklch).
4. **Lower saturation at the ends** Very light and very dark steps look better slightly muted. Full saturation at the extremes looks garish or muddy.
5. **Nudge the hue** Let the light end drift slightly warmer or cooler and the dark end the other way. It adds life without breaking the scheme.

### Why a slight hue shift helps

Real objects rarely darken by simply adding black: shadows pick up cooler or warmer light from their surroundings. A ramp that only mixes black and white looks flat by comparison. Shifting the hue a few degrees across the ramp is standard practice in illustration and design systems.

- Straight ramp: white and black only: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Hue-shifted: sky light, indigo dark: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Two five-step blue ramps around the same core, `#2563eb`. The second drifts towards sky at the light end and indigo at the dark end, so it looks lit rather than mixed.

## Running a whole identity on one hue

A monochromatic brand can be surprisingly distinctive, because it is disciplined in a way most brands are not. The trick is to give each step of the ramp a job and stick to it.

| Ramp step | Job |
| --- | --- |
| 50 to 100 | Page and card backgrounds |
| 200 to 300 | Borders, dividers, quiet fills |
| 400 to 600 | Brand colour, buttons, illustration |
| 700 to 800 | Headings, links, strong fills |
| 900 and darker | Body text, dark-mode backgrounds |

Roles for a monochromatic ramp. Text and background come from opposite ends, which is where contrast lives.

Always pair text and background from opposite ends of the ramp. Two middle steps look lovely as swatches and fail as text; check with the guidelines in [colour contrast](https://gradiently.design/guide/color-contrast-accessibility). Record the ramp, with each step's role, in your [brand kit](https://gradiently.design/guide/brand-kit) so everyone uses the same values.

A portrait editorial post with a serif headline over a soft single-hue background

A calm, single-family field under editorial type.

A wide email header with a headline over a calm single-hue background

The same look carried to an email header.

The one thing a monochromatic identity lacks is an obvious accent. If your designs need a button or a price to jump out, allow one colour from outside the hue and use it rarely. That moves you towards an [analogous palette](https://gradiently.design/guide/analogous-colors) or an accented monochrome, both perfectly good.

## Monochromatic gradients

Single-hue gradients are among the most elegant you can make: they suggest light falling across one material. They never turn muddy, because there is no second hue to fight with.

- Midnight blue: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Rose: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Sage: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Sand: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Violet glow: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Graphite (no hue at all): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Six single-hue gradients. Each moves only in lightness and a little in saturation.

> **Watch for banding** Because a monochromatic gradient changes slowly, it has fewer colour levels to spread across the screen and is prone to visible stripes, especially in dark blues and greys. A fine layer of grain fixes it; see [gradient banding](https://gradiently.design/guide/gradient-banding).

## FAQ

### What is a monochromatic color scheme?

A monochromatic color scheme uses a single hue in a range of tints, shades and tones, from very light to very dark.

### What is the difference between a tint, a shade and a tone?

A tint is a hue mixed with white, a shade is mixed with black and a tone is mixed with grey.

### Is black and white a monochromatic scheme?

Strictly, black, white and grey are achromatic, meaning they have no hue. In everyday use people often call them monochrome, and they follow the same principles.

### How many colours should a monochromatic palette have?

Around nine to eleven steps from near-white to near-black gives enough range for backgrounds, text, borders and brand colour.

### Can a brand use only one colour?

Yes, if the palette has a full range of lightness and each step has a clear role. Many single-colour brands add one small accent for calls to action.