monochrome dark mode palette
A dark theme with too many different hues piles up visual noise fast; the monochrome palette solves this by locking a single hue and varying only lightness, producing a coherent tone scale that still communicates hierarchy without introducing a second color.
The five tones range from L33% (darkest) to L77% (lightest) in 11-point steps, always at the same hue 170 and saturation 68.
Elevation between dark layers usually reuses the second-darkest scale tone, not the lightest, so it does not compete with primary text.
Pairing the lightest extreme with the darkest is the only combination in the scale with a real shot at 4.5:1; it still needs measuring, never assuming from the shared hue.
Hue is the angular position of a color in the circle, usually from 0 to 359 degrees in HSL. It is what makes a color "red", "blue" and so on, regardless of saturation and lightness.
Because lightness is the channel that controls reading contrast on dark screens: varying saturation would change color intensity without necessarily lightening or darkening the tone enough to tell apart background, text and surface layers in a dark theme.
The tool clamps the minimum at L12% on purpose: absolute black against absolute white on an OLED screen creates the largest possible contrast jump, which tires the eye during long sessions. A 12% floor keeps the color perceptible and avoids that extreme.
No. The scale guarantees every tone shares hue and saturation, but WCAG 2.1 measures the luminance ratio of one specific text/background pair (4.5:1 for normal text, 3:1 from large text upward). Two neighboring tones on the same scale can fail that ratio even while staying monochrome.
The pair between the lightest and the darkest scale tone (for example #9CECDF over #1B8D7A in the H170 example), because it is the largest lightness gap available inside the same hue. Still measure the actual ratio before shipping, the 11-point jump between neighboring tones is not enough.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAThe palette is calculated locally in the browser.