Monochrome & Greyscale

Monochromatic palettes work because they eliminate one source of visual decision-making (which colors to combine) and replace it with a different challenge (how to create sufficient differentiation from a single color family). When executed well, the result is instantly cohesive, everything on the page reads as the same visual family, and hierarchy is achieved through size, weight, and tone rather than hue contrast.

This consistency creates a strong brand signal. When every element shares a hue, the color itself becomes a more powerful brand identifier. Tiffany blue, Hermès orange, and Cadbury purple all function as strong brand colors partly because they are applied monochromatic on all brand surfaces, variation in lightness and saturation rather than hue.

A functional monochromatic palette needs at least five values: the lightest tint (for page backgrounds), a light-medium tint (for card surfaces), the base value (for interactive elements), a medium-dark shade (for secondary text and borders), and a near-black shade (for primary text and high-emphasis elements). The Tints & Shades Generator creates exactly this range from any hex value.

For UI work, monochromatic palettes require particular attention to accessibility. Using tints and shades of the same hue as both text and background means you are fighting the luminance difference between those values to achieve contrast, without the boost that complementary color contrast would provide. Always verify every text/background combination with the Contrast Checker.