NodlumeStudio Neutral
Muted grayscale with warm undertones. Lets artwork, photography, or high-end products pop without color interference. (portfolio & gallery)
- Char
- #1c1c1c
- Concrete
- #606060
- Plaster
- #bfb8ae
- Canvas
- #f4efe6
As the eight interface roles
Neutral color palettes with hex codes
A neutral color palette is made of grays, off-whites, beiges and near-blacks — colors with little or no hue — that carry an interface's structure and let a single accent stand out.
Neutrals are the working colors of every interface: background, surface, text, muted text, border. A neutral palette makes them the whole story, with at most one accent for actions. The skill is in the tint — a warm neutral leans toward beige and cream, a cool one toward slate and ice — because a truly hueless gray reads as unfinished.
Editorial sites, portfolios, documentation and any product whose content brings its own color are the natural homes for a neutral palette, and it is the easiest palette to get right: contrast comes entirely from lightness, so the pairs are simple to check.
6 neutral palettes below, each with its named colors, the eight roles the palette generator derives from them, and a link that opens the generator on that palette.
Ink & Paper
A stark, high-contrast combination mimicking traditional print. Ideal for long-form reading, blogs, or minimalist portfolios. (editorial)
- Carbon
- #1f1f1f
- Newsprint
- #f4f1ea
As the eight interface roles
Monochrome
The absolute baseline structure — hierarchy and layout without distraction, or a purely utilitarian anti-design aesthetic. (UI skeleton & wireframing)
- Black
- #000000
- Dark Gray
- #333333
- Gray
- #808080
- Light Gray
- #cccccc
- White
- #ffffff
As the eight interface roles
Earth Tones
Grounded, organic palette of clay, sage, and sand for brands focusing on nature and sustainability. (sustainable & eco)
- Soil
- #593d3b
- Clay
- #9b6a6c
- Sage
- #77876b
- Dried Leaves
- #a8b092
- Sand
- #d6cfc4
As the eight interface roles
Matcha Latte
Calming greens mixed with creamy neutrals, giving a grounding and comforting aesthetic. (coffee shop & organic)
- Roast Coffee
- #3b2f2f
- Deep Matcha
- #6b8e23
- Pale Leaf
- #a9c25d
- Oat Milk
- #ebe5d9
- Vanilla Cream
- #f3efe0
As the eight interface roles
Botanical Archive
Muted, sophisticated plant tones mixed with warm neutrals. Ideal for gardening apps or botanical editorial sites. (editorial & plant care)
- Soil
- #3e2723
- Bark
- #6d4c41
- Moss
- #7a9e7e
- Sage
- #a4c3a2
- Seed
- #dad7cd
- Petal
- #f2e9e4
As the eight interface roles
Using a neutral palette in an interface
Assign the five neutral roles by lightness step — canvas lightest, surface one step down, border around 90%, muted text around 45%, text near 10% — and add one hue for the primary action so the page has somewhere to look. The semantic palette guide explains the eight roles, and the guide to choosing colors for an app walks through the order to decide them in.
- What is a neutral color palette?
- A neutral color palette is made of grays, off-whites, beiges and near-blacks — colors with little or no hue — that carry an interface's structure and let a single accent stand out.
- What are some neutral color palette hex codes?
- Studio Neutral is one: Char #1c1c1c, Concrete #606060, Plaster #bfb8ae, Canvas #f4efe6. This page lists 6 neutral palettes with every hex code, and each opens in the palette generator as a full eight-role UI palette.
- How do I use a neutral color palette in an app or website?
- Assign the five neutral roles by lightness step — canvas lightest, surface one step down, border around 90%, muted text around 45%, text near 10% — and add one hue for the primary action so the page has somewhere to look.
Make one of these your own
Every palette here is a starting point in the palette generator: open one, drag any anchor on the wheel or swap the primary for your brand color, and copy the CSS variables. The theme generator takes it the rest of the way to a Tailwind v4 stylesheet with dark mode.
Open the palette generator