Shades of Maroon

What this tool does

Maroon is a deep, earthy red, the brownish-red of a chestnut shell or autumn leaves. It is darker and quieter than a bright red, steady and grounded rather than loud. Because it is already deep, getting its range right by eye is fiddly, you need a lighter maroon for surfaces and a darker one for contrast while keeping that warm, earthy tone.

That is what this does. You give it a maroon, 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 maroons and a clear answer to the maroon-or-burgundy question.

How to use it

1. Set your maroon. The tool loads on a maroon with its Hex displayed. Replace it using Change Color or the Color Picker, or paste in a hex of your own.
2. Choose the count. The Color Shades field controls how many shades appear, ten by default. Turn it up for a gentler gradient between steps.
3. Take what you need. Each shade shows its HEX, RGB, HSL, and HSV, so you can copy the right one for the job.

Maroon is a warm, brownish red, so its lighter steps soften toward a dusty terracotta and its darker steps deepen toward a near-black brown-red. That earthy character holds across the whole range.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour without muddying it. It takes your maroon, 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.

Because maroon is a pure dark red with no blue in it, its range stays warm and earthy rather than turning cool. The lighter steps drift toward soft brick and clay tones, and the darker steps toward a deep, woody red, which suits its grounded, natural character.

Chestnut, not wine

Maroon's name has nothing to do with wine. It comes from the French word marron, meaning chestnut, and the colour is meant to be that warm, brownish red of a ripe chestnut's shell. That is the key to the whole colour: where many dark reds lean toward purple, maroon leans toward brown, which gives it its earthy, natural feel.

It also has a tidy place in web history. Maroon entered English as a colour word back in 1791, and when the early web needed a standard set of colours, maroon was one of the originals, made an official web colour in 1996 with the hex code #800000. So unlike many shades, you can write the word maroon straight into a stylesheet and get a precise, agreed colour.

The named maroons, with hex codes

Maroon sits among the deep, warm reds. Here are useful reference points, with a hex for each.

• Maroon (#800000): the standard web maroon, a pure dark red with no blue, leaning slightly brown.
• Dark Red (#8B0000): very close to maroon but a touch brighter and purer red.
• Firebrick (#B22222): a lighter, warmer brick red for the upper end of the range.
• Oxblood (#4A0000): a very dark, almost-black red, the deepest of the warm reds.

The thing that sets maroon apart from its wine-red neighbours is the lack of blue. Its red and brown mix keeps it warm and grounded, which is exactly why it reads as earthy rather than regal, and why it has its own distinct character despite looking similar at a glance.

Maroon or burgundy, and where maroon works

Maroon and burgundy get mixed up constantly, but the difference is simple: undertone. Maroon (#800000) leans brown and earthy, while burgundy (#800020) leans purple and wine-like. A quick way to remember it is chestnut versus wine. Maroon belongs to the brown family of reds, burgundy to the purple family, so maroon reads warmer and more grounded while burgundy reads cooler and more regal.

That earthy, dependable quality shapes where maroon shows up. It is the classic colour of sports teams and universities, from football clubs to school and college colours, where it signals tradition and legacy. It also suits rustic and autumnal designs, leather and wood textures, and anything going for warmth and steadiness rather than luxury or urgency.

Building a palette from your maroon

Maroon's warmth makes it easy to pair. Use the steps from this tool as the spine of a palette: a deep maroon for text and headers, your main maroon for blocks, and a lighter, clay-toned maroon surface behind content. Its earthiness means it rarely clashes.

For accents, maroon sits naturally with warm and natural colours, gold and cream for a classic look, tan and brown for something earthier, and navy or grey when you want contrast. A forest or olive green pairs well too, leaning into its natural side. Because maroon is warm and grounded rather than loud, it carries larger areas comfortably, so you have more freedom than with a brighter red.

Questions people ask

What colour is maroon?

A dark, warm red with a brown undertone, named after the chestnut. That brown lean is what gives maroon its earthy, grounded feel and sets it apart from purer or more purple dark reds.

What is the hex code for maroon?

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

What is the difference between maroon and burgundy?

Maroon has a brown undertone and reads as earthy and warm. Burgundy has a purple undertone and reads as wine-like and regal. Think chestnut for maroon, wine for burgundy.

Can I use my own maroon?

Yes. Paste your exact maroon in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

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. Maroon (color), the chestnut origin and the named web value. Wikipedia. https://en.wikipedia.org/wiki/Maroon_(color)