Skip to content

Neutral Palettes

Neutrals are the backbone of every design. These gray, beige, and off-white palettes give your layouts structure and calm.

Neutrals do most of the work in any design — backgrounds, surfaces, text, and borders all lean on them. Choosing the right neutral temperature (warm beige vs cool gray) quietly sets the tone of an entire interface.

These palettes give you complete neutral systems, from near-black to off-white, in both warm and cool directions. Copy any HEX value or the full palette as the foundation for your design.

Cool Gray Scale

Modern, minimal, and tech interfaces

Warm Greige

Editorial, lifestyle, and reading-focused sites

Soft Beige

Warm, calm, and organic brands

Slate & Stone

Professional dashboards and SaaS UIs

Best use cases

  • Foundations for any palette — backgrounds, surfaces, text, and borders.
  • Minimalist and editorial designs that let content lead.
  • Design systems that need consistent gray and beige scales.

Design tips

  • Commit to one temperature — mixing warm beige with cool gray often looks muddy.
  • Tint your neutrals slightly toward your brand hue for a more cohesive, custom feel.
  • Keep enough lightness steps between background, surface, and border so layers read clearly.

Frequently asked questions

What counts as a neutral color?

Neutrals are low-saturation colors — blacks, grays, whites, beiges, and taupes. They can lean warm or cool depending on the hint of hue mixed into them.

Are warm or cool neutrals better?

Neither is better — it depends on mood. Warm beiges and greiges feel cozy and editorial, while cool grays feel modern and technical. Pick the temperature that matches your brand.