PALETTE GALLERY
Monochrome color palette
A monochrome palette drops hue and chroma entirely and works in lightness alone. This set is six true-neutral steps from Ink to Cloud, spaced so each adjacent pair stays visually distinct while the endpoints span a full 18.5:1 contrast ratio.
- InkText#0A0A0A
- GraphitePrimary#2E2E2E
- Slate GrayAccent#5C5C5C
- StoneHighlight#8C8C8C
- SilverSurface#C4C4C4
- CloudBackground#F7F7F7
Where this palette works
Content-first and editorial interfaces
No hue competes with the content, useful for reading-heavy products like documentation or long-form publishing.
Photography and portfolio sites
A neutral chrome lets photography and imagery supply all the color on the page.
Print-adjacent and typography-led brands
Monochrome UI reads closer to print design conventions than a colored interface does.
Accessible pairings
Every step in this scale pairs with Cloud or Ink at a known ratio, so picking a text or border color is a lightness decision, not a hue decision. Ink on Cloud is the maximum-contrast pairing; Slate Gray on Cloud is the minimum usable pairing that still clears AA.
Use these tokens
Copy as CSS custom properties or a Tailwind v4 @theme block.
:root {
--palette-text: #0A0A0A; /* Ink */
--palette-primary: #2E2E2E; /* Graphite */
--palette-accent: #5C5C5C; /* Slate Gray */
--palette-highlight: #8C8C8C; /* Stone */
--palette-surface: #C4C4C4; /* Silver */
--palette-background: #F7F7F7; /* Cloud */
}FAQ
Frequently asked questions
A monochrome palette is a deliberate, spaced lightness scale, six or more distinct steps with known contrast ratios between them, rather than a single gray reused everywhere. The distinction matters for accessibility: a scale gives options that clear AA at every role (text, border, surface), a single gray usually does not.
None, by definition, though most monochrome products keep exactly one saturated color reserved for a single primary action. Adding it to this palette would make it a neutral-plus-accent set rather than a true monochrome one.
No. Stone (#8C8C8C) reaches 3.36:1 against white and Silver (#C4C4C4) reaches 1.74:1, both under the 4.5:1 AA floor. Reserve them for borders, dividers, and disabled states, and use Ink or Graphite for text.
Related palettes
Neutral minimalist palette
A neutral minimalist color palette built from charcoal, taupe, and warm gray, with hex codes, accessible text pairings, and export-ready CSS variables.
Dark mode palette
A dark mode color palette with layered void, elevated, and card surfaces, electric blue and signal accents, hex codes, and accessible pairings.
Earth tone palette
An earth tone color palette built from umber, terracotta, and olive, with hex codes, accessible text pairings, and export-ready CSS variables.
Build on this palette
Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.