Neutral color palettes

Six neutral schemes, five colors each, ordered dark to light. Every hex copies in one click.

Neutral does not mean gray. A neutral palette is one where every color carries the same faint hue bias - warm toward yellow and red, cool toward blue and green - held at very low saturation. That shared bias is the entire trick: it is what separates a considered stone palette from a row of default grays, and it is why mixing a warm neutral with a cool one in the same interface reads as a mistake even to people who cannot say why.

  • Warm stone

  • Cool concrete

  • Bone

  • Greige

  • Ink and paper

  • Clay

Pick the bias first and hold it everywhere, including in the near-blacks and the off-whites, which are the two places it is most often dropped. A warm scheme with a cold #FAFAFA background is the most common version of this error. The other thing worth knowing is that neutrals give you contrast almost for free - the darkest and lightest in every row below clear AAA - so a neutral palette will usually pass accessibility without effort, which is exactly why it is the safe default for a content-heavy site. What it will not do is create emphasis, so plan on one saturated accent from outside the palette.

Other palettes.

Same format, different mood. Every hex on every one of them copies in a click.

All thirteen palette collections · Pull a palette out of an image · Check a pair for contrast

  • Figma plus Siter.io

    Start with the design you already have.

    Install the Figma plugin, send a frame across, and finish it on the canvas. The free plan builds and previews as much as you like; publishing to your own domain starts at $7/mo billed yearly.

    Get the plugin ->

  • Start for free with Siter.io

    Start for free ->
Hey there 👋  Friends from designmodo are here to help!
More Products