Shades of Beige

What this tool does

Beige is the quiet one, a pale, soft, sandy neutral that sits somewhere between off-white and light brown and goes with almost everything. It is calm and understated, the background colour that lets other colours do the talking. Because it is so pale, building a usable range takes care, you need it to deepen a little for structure and contrast while keeping that neutral softness.

That is what this does. You give it a beige, and it builds the whole run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named beiges and a clear answer to the beige-or-cream question.

How to use it

1. Set your beige. The tool starts on a beige with its Hex displayed. Choose your own using Change Color or the Color Picker, or enter a hex directly.
2. Choose the count. The Color Shades field sets how many shades you get, ten by default. More steps make a gentler gradient.
3. Take what you need. The HEX, RGB, HSL, and HSV for each shade are right there to copy.

Beige is a pale, soft neutral, so its lighter steps move quickly toward off-white, while the deeper steps grow into warm tan and light brown. The deeper steps are usually the more useful ones, since they give you something to contrast against the beige.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour smoothly rather than just fading it. It takes your beige, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Since beige is already pale, the lighter end of its range turns to off-white fairly quickly. The more useful steps tend to be the deeper ones, where the colour grows into tan and soft brown, giving you a set of warm, muted neutrals that all belong together.

The colour of undyed wool

Beige takes its name and its character from raw material. The word came from French, where it originally described natural, undyed wool, the soft, pale, slightly greyish-brown colour of the fibre before anyone added colour to it. So beige is, at its root, the colour of a thing in its plainest, most natural state.

That origin explains exactly how beige behaves. It is the ultimate neutral, calm, understated, and uncommitted, a colour that gets out of the way rather than making a statement. It carries no strong mood of its own, which is precisely why it has become the safe, versatile background of choice in interiors, fashion, and design: like undyed wool, it is the blank, natural starting point that everything else can be built on.

The named beiges, with hex codes

Beige belongs to a family of pale, warm, sandy neutrals. Here are the common ones, with a hex for each.

• Beige (#F5F5DC): the CSS named beige, a pale, soft, slightly yellow neutral.
• Wheat (#F5DEB3): a touch warmer and more golden.
• Tan (#D2B48C) and Burlywood (#DEB887): deeper, sandier light browns.
• Khaki (#C3B091): a more muted, slightly greenish neutral.
• Greige (around #BEB5A7): a grey-leaning beige, the fashionable mix of grey and beige.

The thing to notice is how small the differences are, and how much they matter. A slightly greener, greyer, or more golden beige changes the whole feel of a design, so a hex is the only reliable way to fix the exact neutral you want, especially with a colour this subtle.

Beige or cream, and where beige works

Beige and cream are easy to mix up, but the difference comes down to warmth and what is mixed in. Cream is a warm, soft white with a clear yellow tint, so it reads as cosy and creamy. Beige leans more grey and brown and sandy, so it reads as more neutral and earthy. Cream is a warm white; beige is a pale, warm neutral closer to light brown. Cream feels softer and richer, beige feels calmer and more grounded.

That neutrality is exactly why beige is so useful. It is the classic safe background, calm and versatile, which is why it anchors so much interior design, fashion, and minimal, natural branding. Its reputation for being a little boring is fair, but that is also its strength, and the recent taste for quiet luxury and greige tones has made this understated neutral feel quietly stylish again.

Building a palette from your beige

Beige is a canvas, so build everything on top of it. It sits naturally with white and brown for a soft, tonal, earthy scheme, and it takes a sharp, classic contrast from navy or charcoal. Sage and olive green or a touch of terracotta lean into its natural side, while black text always reads cleanly against it.

To build a working set, use the steps from this tool as the spine: a pale beige as the main surface, a deeper tan for gentle structure and dividers, and a dark, rich colour brought in for text and contrast. Keeping the base in this warm neutral family gives the whole design a calm, cohesive, and quietly elegant feel, with the colour you add carrying the personality.

Questions people ask

What colour is beige?

A pale, soft, sandy neutral that sits between off-white and light brown, with a slightly grey, yellow-brown cast. It takes its name from the natural colour of undyed wool.

What is the hex code for beige?

The standard web value is #F5F5DC. It is one of the named CSS colours, so you can also just write "beige" in your stylesheet, while a specific beige will have its own hex.

What is the difference between beige and cream?

Cream is a warm white with a clear yellow tint, while beige is greyer, browner, and sandier. Cream reads as cosy and creamy; beige reads as more neutral and earthy.

Can I use my own beige?

Yes. Paste your exact beige in as the base, and the tool builds the lighter and deeper steps of that colour, so you get a matching set of neutrals from off-white to soft brown.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Beige, the undyed-wool origin and the named web value. Wikipedia. https://en.wikipedia.org/wiki/Beige