Half-strength red gives #800000 its recognizable depth.
Deep red color reference
Maroon Hex Code
The standard maroon hex code is #800000. Use this atlas to copy the core value, move through 1686+ maroon variations, compare undertones, build palettes, generate scales and turn the color into practical CSS.
RGB 128, 0, 0HSL 0°, 100%, 25%CSS named color: maroon
STANDARD WEB MAROON
RED CHANNEL / 128
Core#800000
CharacterDeep · grounded · warm
Library1686+ values
Color anatomy
Why #800000 reads as maroon.
Maroon is built from a strong red channel with green and blue reduced to zero. That creates a dark, concentrated red that feels more grounded than bright crimson and less violet than many wine shades.
Removing the other channels keeps the core hue firmly red.
Low lightness gives maroon its dark, substantial visual weight.
White text on #800000 has strong contrast for common interface use.
Hue movement
Shift maroon from berry-cool to brick-warm.
Small hue moves can change the personality of maroon dramatically. Cooler values lean toward berry and plum; warmer values move toward brick, mahogany and brown-red.
Fast copy collection
20 useful maroon shades.
These curated values cover core maroon, wine, burgundy, oxblood, garnet, rosewood, brick, berry, dusty and near-black directions. Every swatch is copyable.
Need much more range? The full library contains 1686+ generated and organized maroon shades.Open full shade atlas →
Undertone families
18 families, not one flat red.
Organizing by undertone makes a large shade library useful. Pick a family first, then adjust saturation and lightness inside that direction.
Classic Maroon
Explore deep, rich, soft and pale steps around #AB0D0D.
Wine Maroon
Explore deep, rich, soft and pale steps around #95233A.
Burgundy Maroon
Explore deep, rich, soft and pale steps around #9E1A3B.
Oxblood Maroon
Explore deep, rich, soft and pale steps around #A21622.
Garnet Maroon
Explore deep, rich, soft and pale steps around #A3142C.
Rosewood Maroon
Explore deep, rich, soft and pale steps around #88303B.
Mahogany Maroon
Explore deep, rich, soft and pale steps around #8D372A.
Brick Maroon
Explore deep, rich, soft and pale steps around #98331F.
Warm Maroon
Explore deep, rich, soft and pale steps around #A02518.
Cool Maroon
Explore deep, rich, soft and pale steps around #97214C.
Plum Maroon
Explore deep, rich, soft and pale steps around #883059.
Berry Maroon
Explore deep, rich, soft and pale steps around #9A1D43.
Cranberry Maroon
Explore deep, rich, soft and pale steps around #A51235.
Muted Maroon
Explore deep, rich, soft and pale steps around #7B3D41.
Dusty Maroon
Explore deep, rich, soft and pale steps around #774049.
Brown Maroon
Explore deep, rich, soft and pale steps around #844433.
Velvet Maroon
Explore deep, rich, soft and pale steps around #91274A.
Near Black Maroon
Explore deep, rich, soft and pale steps around #8D2A2E.
Lightness ladder
One hue can carry an entire interface.
Use pale maroon tints for surfaces, middle steps for borders and secondary emphasis, rich maroon for controls, and near-black maroon for headings or deep panels.
Generate your own maroon scale →Pairing systems
Maroon palettes with room to breathe.
Maroon becomes easier to use when it is paired with structured neutrals and one deliberate counterpoint. Cream, antique gold, navy, sage, blush and stone can all support different moods.
Heritage luxury
Maroon & Antique Gold
Editorial warmth
Wine & Parchment
Architectural calm
Oxblood & Stone
Formal depth
Burgundy & Navy
Natural balance
Maroon & Sage
Classic invitation
Garnet & Cream
20 curated palettes are available with individually copyable colors.See all palettes →
Where it works
Use maroon as a role, not decoration.
A deep color becomes more flexible when it has a job. Assign maroon to emphasis, identity, status or hierarchy instead of scattering it across every surface.
Give identity moments real weight.
Maroon can create a memorable signature in logos, mastheads, packaging bands and key navigation states without relying on bright saturation.
Primary actions
Use a tested rich maroon for selected states, buttons and small emphasis zones against light neutral surfaces.
Headlines & dividers
Dark maroon can replace black when you want text and rules to feel warmer and more branded.
Focused highlights
Reserve a distinct maroon step for one meaningful series, threshold or active category rather than using many nearby reds.
Print & packaging
Pair maroon with uncoated cream, metallic gold, charcoal or natural kraft-inspired tones for tactile visual systems.
Maroon text on warm ivory.
Deep maroon can function as a branded ink when its exact contrast is verified.
White stays clear and direct.
Use the checker for your exact foreground, background, size and weight.
Accessible combinations
Contrast is measured, not assumed.
Color names do not guarantee readability. Test the actual values used in the component, including hover, disabled and focus states.
- Keep body text strongly separated from tinted surfaces.
- Use visible focus indicators around maroon controls.
- Do not rely on maroon versus red alone to communicate status.
- Test text over gradients at the darkest and lightest points.
Implementation
Turn Maroon Hex Code into reusable CSS.
Semantic tokens keep the color system understandable as a project grows. Start from #800000, then assign lighter and darker values to specific roles.
Brand tokens
:root {
--maroon-core: #800000;
--maroon-dark: #2A0B12;
--maroon-soft: #D5A2AA;
}Primary button
.button-primary {
background: var(--maroon-core);
color: #FFFFFF;
border: 1px solid #5A0000;
}Warm gradient
.hero-accent {
background: linear-gradient(120deg, #2A0B12, #800000 56%, #B95765);
}Browser tools
Convert, test, blend and scale.
Use the utilities to move from a single hex code to practical production values without leaving the site.
01Open →02Open →03Open →04Open →
Color Converter
Convert any HEX value to RGB and HSL, then copy the format you need.
Contrast Checker
Measure a foreground/background pair and see the WCAG-oriented ratio.
Gradient Maker
Blend two colors at a chosen angle and copy ready-to-use CSS.
Maroon Scale Generator
Adjust hue and saturation to generate a 12-step maroon family.
Close color names
Maroon, burgundy and wine are related—not interchangeable.
Names vary across brands and industries, so the hex value is the reliable specification. Treat the name as orientation and the number as the source of truth.
Maroon · #800000
A canonical dark red with a direct, grounded character and no blue or green in the standard RGB value.
Burgundy · #800020
A cooler deep red that introduces a small blue component, giving the color a wine-purple edge.
Wine · #5D1630
A softer, darker berry-red direction with more balanced channels and a less literal primary-red structure.
Guides
Go beyond the swatch.
Eight long-form guides cover color theory, shade systems, palettes, UI, accessibility, branding, CSS and gradients.
01
Maroon Hex Code Explained: #800000, RGB, HSL & Real-World Use
Understand what #800000 means, how HEX maps to RGB and HSL, how maroon differs from nearby color names, and how to specify it consistently.
Read guide →02Maroon Shades, Tints & Tones: Building a Useful Color Scale
Learn how to build light, dark, muted, warm and cool maroon families and map them to practical design roles.
Read guide →03Maroon Color Palettes: Pairings That Work in Real Design Systems
Build balanced maroon palettes with cream, gold, navy, sage, blush, charcoal, powder blue and structured neutrals.
Read guide →04Using Maroon in Web & UI Design Without Making Interfaces Heavy
Apply maroon to buttons, navigation, surfaces, forms, typography, dark mode and charts with clear hierarchy.
Read guide →05Maroon Accessibility & Contrast: Practical Rules for Readable Interfaces
Use maroon accessibly with measured contrast, visible focus, redundant status cues, readable links and resilient data visualization.
Read guide →06Maroon Gradients & Backgrounds: CSS Techniques for Depth and Readability
Create linear and radial maroon gradients, photo overlays and text-safe backgrounds while keeping performance and contrast in view.
Read guide →07Maroon Branding & Visual Identity: From Logo Color to Production Rules
Choose a maroon undertone, build a brand palette, define logo behavior, align typography and imagery, and document print and digital use.
Read guide →08Maroon CSS & Design Tokens: Turning #800000 Into a Maintainable System
Build base and semantic tokens, interaction states, themes and documentation so maroon stays consistent across a codebase.
Read guide →Questions
Maroon Hex Code FAQ
Quick answers for common specification, pairing, accessibility and implementation questions.
What is the standard Maroon Hex Code?
The commonly used web value for maroon is #800000. Its RGB value is 128, 0, 0 and its HSL value is approximately 0°, 100%, 25%.
Is maroon the same as burgundy?
They overlap, but they are not identical. Maroon is usually a deep red-brown or dark red, while burgundy often leans slightly cooler or more wine-purple.
What colors pair well with maroon?
Cream, ivory, warm beige, antique gold, charcoal, navy, sage, olive, blush, dusty blue and soft metallic tones can all work with maroon depending on the mood.
What is a light maroon hex code?
#A14A59 is a useful softened maroon and #D5A2AA works as a pale maroon surface. Use the shade library for many more light variants.
Can I copy every shade?
Yes. Shade cards, format chips, palette swatches, generated scales and code snippets support copy-to-clipboard and show a visible Copied notification.
Is white text readable on #800000?
White on #800000 has strong contrast. For production interfaces, still test the exact text size, weight and surrounding state in the contrast checker.
How can I use maroon in CSS?
Use #800000 directly or define semantic custom properties such as --maroon-brand, --maroon-surface and --maroon-ink so the system is easier to maintain.
Does maroon work for modern interfaces?
Yes. The key is restraint: use it for focused actions, selected states, data highlights or brand moments, then give it enough neutral space to avoid visual heaviness.
What is the RGB value of maroon?
For #800000, the RGB value is rgb(128, 0, 0). That means the red channel is halfway up while green and blue are zero.
Where should very dark maroon be used?
Near-black maroons work well for headings, dark panels, premium packaging, footer backgrounds and subtle tonal depth when pure black feels too neutral.