---
name: Monochromatic palette
slug: monochromatic-palette
category: color
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A scheme drawn from one hue at many lightness and saturation levels,
  so hierarchy comes from contrast alone rather than from colour difference.
aliases:
  - name: monochrome
    source: community
  - name: single hue palette
  - name: one color scheme
    source: community
tags:
  - perception
relations:
  contrastWith:
    - color-ramp
    - analogous-colors
    - duotone
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources:
  - title: The Ultimate Color Glossary For UI Designers
    url: https://careerfoundry.com/en/blog/ui-design/color-glossary-for-ui-designers/
demo: inline
exhibit: false
useWhen: one hue carrying the whole interface
---

A monochromatic palette fixes the hue and varies everything else. Backgrounds, surfaces,
borders, muted text, body text, and the accent are all the same angle on the
[colour wheel](/color-wheel), separated only by [lightness](/lightness) and
[saturation](/saturation). Nothing in the interface is a different colour from anything
else, which means every distinction the reader can see has been earned by contrast. That
constraint is the appeal: hierarchy either works or it obviously does not, and there is
no second hue available to paper over a layout that never established one.

Building one is a ramp problem. Pick the hue, walk lightness from near white to near
black in the number of steps the system needs, and then taper chroma at both ends,
because a ramp that holds chroma flat glows at the light end and turns to mud at the dark
one. [Tint](/tint) and [shade](/shade) are the two operations, inherited from paint;
the palette is the system built out of them, with a role assigned to each step so that
components reference `surface` and `border` rather than a number. Authoring in
[OKLCH](/oklch) makes this tractable, since lightness and chroma are separate numbers
there, and the very low chroma steps are still the hue: that faint warmth in a "grey"
card is what tells a reader it belongs to the same family as the button.

The trap is that a single hue leaves nowhere for meaning to live.
[Status colour](/status-color) is the usual casualty: a green success and a red error are
by definition off palette, so a monochromatic system has to grant them an explicit
exception rather than pretend they can be expressed in blue. Charts have the same problem
one step worse, since a monochromatic series can only encode order, never category. Most
real systems land on a monochromatic core plus a small reserved set of colours that mean
something, which keeps hue as information rather than as decoration.

Accessibility comes out ahead more often than not. Because separation is carried by
lightness, [contrast ratios](/contrast-ratio) tend to be easy to reason about, and
nothing in the scheme depends on telling two hues apart, so colour vision differences
change nothing about it. The remaining risk is subtlety: a palette whose steps sit two or
three points of lightness apart looks refined on a calibrated display and collapses into
one flat field on a cheap laptop in daylight. Note also that "monochrome" strictly means
one colour, and is often used loosely for greyscale; a monochromatic palette is the wider
sense, where the one colour is any hue at all.