Color Memory Game
By John K.··12 min read

Monochromatic colors: one hue, five swatches, and a contrast budget that changes with the hue you picked

What a monochromatic color scheme is, worked palettes with hex codes, and measured CIEDE2000 data showing the identical recipe delivers two and a half times more contrast in green than in blue.

A monochromatic color scheme uses one hue and nothing else. You take a single point on the color wheel and build the whole palette by changing how light and how saturated that hue is. No second hue, no accent, no opposite. Navy, royal blue, cornflower, powder blue. One color, five volumes.

It is the scheme every guide recommends when you want something that cannot clash, and the instructions are always identical: pick a hue, make five evenly spaced swatches. What none of them mention is that those instructions are not one recipe. They are 360 different recipes that happen to share a wording.

I ran the construction through the color difference formula this site uses for scoring, sweeping a five-swatch monochromatic ramp through every hue on the wheel. The identical settings produce a palette spanning ΔE 71 at green and ΔE 28 at blue. Two and a half times the contrast for the same effort, decided entirely by which hue you happened to start on. Below are the worked palettes, the numbers, and the fix, which turns out to be a different construction for one narrow band of the wheel.

What a monochromatic color scheme is

Three properties describe any color: its hue, which is its position on the wheel; its saturation, which is how much of the hue is present rather than gray; and its lightness. A monochromatic scheme locks the first and varies the other two.

The traditional vocabulary splits the variation three ways. A tint is the hue with white added. A shade is the hue with black added. A tone is the hue with gray added, which lowers saturation without pushing the color to either extreme. A full monochromatic palette normally runs two tints, the pure hue, and two shades, though nothing stops you using five tints or five tones.

This is the one scheme with no geometry to memorise. Every other arrangement on the wheel is defined by an angle: complementary is 180 degrees, triadic is 120, analogous is a cluster inside 60, split complementary is 150 and 210. Monochromatic is zero degrees. That absence of an angle is what makes it safe, and it is also what makes it fragile, because with no hue difference to carry the palette, every bit of separation has to come out of lightness and saturation.

Monochromatic color palettes with hex codes

These are built the standard way. Two tints made by desaturating towards white, the pure hue in the middle, then two shades made by darkening. Saturation runs 30, 60, 100 across the tints and lightness runs 100, 70, 40 across the shades. If the notation is unfamiliar, how to read hex color codes covers what the six digits are doing.

  • Blue. #b3b3ff, #6666ff, #0000ff, #0000b3, #000066. L* runs 75, 51, 32, 21, 9. Total span ΔE 61.
  • Green. #b3ffb3, #66ff66, #00ff00, #00b300, #006600. L* runs 94, 90, 88, 64, 37. Total span ΔE 47.
  • Red. #ffb3b3, #ff6666, #ff0000, #b30000, #660000. L* runs 80, 63, 53, 37, 19. Total span ΔE 62.
  • Orange. #ffd9b3, #ffb366, #ff8000, #b35900, #663300. L* runs 89, 79, 67, 48, 27. Total span ΔE 56.
  • Violet. #d9b3ff, #b366ff, #8000ff, #5900b3, #330066. L* runs 79, 58, 41, 28, 14. Total span ΔE 63.

Look at the green row before you use it. The first three swatches sit at L* 94, 90 and 88, which is three swatches occupying six points of lightness, and the measured gap between the second and third is ΔE 5.4. The last two steps in the same palette are ΔE 18 and 27. That is one palette, built by one rule, where the top half is nearly flat and the bottom half does all the work. The red palette next to it steps 17, 15, 16, 16, which is about as even as you can ask for.

Nothing was done differently. The rule was applied identically to both. The difference comes from the hue itself, and it is worth understanding why, because it decides which construction you should be using.

The measurement: same recipe, different results

I built a five-swatch ramp at full saturation with lightness at 20, 40, 60, 80 and 100, then swept it through all 360 hues, measuring the CIEDE2000 distance from the darkest swatch to the lightest. ΔE is the standard perceptual measure of how different two colors look, and it is the same formula behind the scoring on this site, described in what CIEDE2000 actually is. Roughly, ΔE 1 is the smallest difference a trained eye can catch under lab conditions, ΔE 10 is comfortable, ΔE 50 is a different color entirely.

  • Widest palette: ΔE 71.6, at hue 129, a green just past the pure one.
  • Narrowest palette: ΔE 28.3, at hue 240, pure blue.
  • Average across the wheel: ΔE 52.8.
  • Ratio between best and worst hue: 2.5 to 1.

Yellow, chartreuse, green, spring green and cyan all land between ΔE 70 and 72. Blue, azure and violet land between 28 and 39. Red, orange, magenta and rose sit in the middle, 41 to 52. The wheel divides into a generous half and a stingy half, and the boundary is not subtle.

The cause is visible in the L* column of the palettes above. Saturated green at full brightness reaches L* 88. Saturated blue at full brightness reaches L* 32. Both are as bright as that hue gets in sRGB, and blue has simply run out of room. A monochromatic blue ramp is squeezed into the bottom third of the lightness scale before you make a single decision, because there is no such thing as a light saturated blue. To go lighter, you have to give up the saturation, at which point you are not lightening the hue, you are diluting it.

This is not a quirk of the formula. It is the shape of the sRGB gamut. Blue's primary contributes about 7 percent of the luminance of white while green contributes 72, so a fully blue pixel is dark by construction. Every rendering of this on a screen inherits it.

Vary lightness, unless the hue is blue

There are two ways to build a monochromatic ramp. Hold saturation and move lightness, which is the tint-and-shade approach, or hold lightness at maximum and move saturation, which is the tone approach. Guides treat these as stylistic alternatives. Measured, they are not interchangeable, and which one wins depends on the hue.

  • The lightness ramp is wider for 293 of 360 hues.
  • The saturation ramp is wider for 67 hues, and they are contiguous: 216 through 282, the azure to violet band.
  • At yellow, the lightness ramp spans ΔE 71 and the saturation ramp spans ΔE 19. Nearly four to one.
  • At blue, the lightness ramp spans ΔE 28 and the saturation ramp spans ΔE 51. Nearly two to one the other way.

So the advice that actually falls out of the numbers is a two-part rule. For most of the wheel, build monochromatic palettes by moving lightness and leave saturation alone. For anything from azure through blue to violet, do the opposite: keep the swatches bright and move saturation, because that is the only axis with any room on it. A monochromatic blue built from tints will always outperform one built from shades, which is the reverse of what works for a yellow.

I have not seen this stated anywhere, and the reason is probably that color theory was written for pigment, where a dark blue is trivially easy to mix and a light saturated blue is the hard one. The constraint flipped when the medium became emitted light, and the advice never caught up.

How many swatches a monochromatic palette can hold

The other question worth measuring is where the palette stops being readable. If five swatches are good, ten give you more nuance, up to the point where two adjacent swatches stop looking like two colors. I ran evenly spaced ramps of three through ten swatches across every hue and recorded the smallest adjacent gap in each.

  • Five swatches: the tightest adjacent step is ΔE 6.5 on the worst hue, ΔE 11 on a typical one. Comfortable everywhere.
  • Six swatches: worst step ΔE 5.2. Still fine.
  • Seven swatches: 41 hues now contain a step under ΔE 5, which is where two swatches in a UI start being mistaken for a rendering artifact rather than a decision.
  • Ten swatches: every single hue has a step under ΔE 5, and 27 hues have one under ΔE 3.

Six is the honest ceiling for an evenly spaced monochromatic ramp, and the five that everyone recommends turns out to be well judged rather than arbitrary. The ten-step ramps that ship in design systems are not wrong, but they are not evenly spaced in perceptual terms and they are not all meant to be used together. They are a lookup table, not a palette.

Monochromatic is not actually one hue

Here is the finding that surprised me most. A monochromatic scheme is defined by holding the hue constant, and in HSL or HSV you do hold it constant. The number in the picker does not move. But that number is a coordinate in a color space built for convenience, not for perception. Converted into CIELAB, where hue angle tracks what the eye reports, the hue does move.

Across a five-step lightness ramp, the CIELAB hue angle drifts by an average of 5.3 degrees, and 63 of the 360 hues drift by more than 10. The worst is around hue 357, a red just short of the top of the wheel, which drifts 19.3 degrees between its darkest and lightest swatch.

On a tint ramp, made by desaturating towards white, it is worse. Azure drifts 27.6 degrees as it lightens. Red drifts 19. Rose drifts 18. For context, 30 degrees is the step that separates a primary from a tertiary color. A monochromatic azure palette covers nearly as much perceptual hue as the gap between red and red-orange, while every tool involved insists it is a single hue.

This is the same family of effect that makes a saturated blue look purple when you lighten it, and it is why picking tints by eye and picking them by formula give different answers. The formula holds a number. Your eye holds a color. They are not the same thing, which is the recurring theme of every measurement on this site.

How a monochromatic palette compares to the others

Setting the schemes side by side on the same measure, averaged across all 360 rotations of the wheel:

  • Complementary pair, the two colors 180 degrees apart: ΔE 92.
  • Triadic leg, base to either partner: ΔE 69.
  • Split complementary, the gap between the two accents: ΔE 41.
  • Monochromatic, the entire five-swatch palette end to end: ΔE 53.
  • Monochromatic, two swatches apart, which is what most real layouts actually put next to each other: ΔE 23.

The whole monochromatic palette, from its lightest tint to its darkest shade, covers less perceptual ground than a single complementary pair. That is the trade, stated numerically. You buy guaranteed harmony with roughly 60 percent of the contrast budget, and in the blue band you buy it with 30 percent.

Which is fine, as long as you know it going in. The failure mode of a monochromatic layout is never that it clashes. It is that nothing on the page draws the eye, and the usual fix, adding a sixth swatch, makes it worse rather than better.

What this means if you are trying to see color accurately

There is a practical version of all this for anyone training their eye. The differences inside a monochromatic palette are exactly the differences people are worst at judging, because there is no hue cue to anchor on.

Running the same numbers through this site's scoring curve makes the point. Miss a green target's lightness by 20 points and you lose ΔE 11.6, scoring 8.3 out of 10. Miss a blue target's lightness by the same 20 points and you lose only ΔE 6.5, scoring 9.2. The identical mistake costs nearly twice as much on a green as on a blue, and the reason is the same gamut asymmetry that shortens the blue palette in the first place.

Being wrong about a hue is easy to notice, because the wrong hue looks like a different color. Being wrong about lightness inside one hue is the error that survives, and it is the one that separates people who are decent at this game from people who are good at it. If you want to work on it deliberately, training your eye for color goes into the drills.

The short version

A monochromatic scheme is one hue varied by lightness and saturation, normally five swatches, two tints and two shades either side of the pure color. Measured, the same construction yields ΔE 71 of range at green and ΔE 28 at blue, because saturated blue tops out at L* 32 and has nowhere lighter to go. Build blue and violet palettes by desaturating rather than darkening, cap any evenly spaced ramp at six swatches, and do not expect a monochromatic layout to carry the contrast a complementary pair would.

Then play a few rounds and watch what happens the first time a target is a dark blue. The hue will be the easy part.