Monochromatic
One hue at many lightness levels. The whole design speaks in a single color's voice, with contrast carried by light versus dark.
See it
What it is
A monochromatic scheme holds one hue angle fixed and varies only lightness and chroma: a navy family running from near-white ice through mid blues down to near-black midnight. That is different from an achromatic palette, which has no hue at all. Picasso's Blue Period is the canonical version; the 50-to-900 tonal ramps in every UI framework are the boring, useful version. Boring with an asterisk: many of those ramps deliberately shift hue as they get lighter or darker, so they are functionally monochromatic without being strictly fixed-hue.
Reach for it when cohesion beats variety: brand-forward marketing pages, dark interfaces, editorial spreads, single-product sites. It is also the hardest scheme to get wrong, because with one hue you cannot create a hue clash. All the work moves into lightness, which is the variable that actually decides whether a layout reads.
Gotcha: every distinction now rides on lightness alone, so you need a wider spread than feels natural, roughly 15 to 20 OKLCH lightness points between any two steps that must be told apart. The other trap is semantics: in a blue-only system, a 'danger' state made of blue does not read as danger. Most real monochromatic systems quietly keep one out-of-family red for errors and do not mention it in the brand deck.
Ask AI for it
Build a monochromatic palette from a single hue: hold the hue angle constant and vary only lightness and chroma. Generate 9 OKLCH steps from about 97% lightness down to 15%, letting chroma peak around the middle steps and fall off at both ends so the lightest and darkest read as near-neutral. Map light steps to backgrounds and surfaces, mid steps to borders and secondary text, dark steps to body text and the primary button. Keep at least 15 lightness points between any two steps used next to each other, and add exactly one out-of-hue color reserved for error states. Return the ramp as CSS custom properties with hex fallbacks.