Using Maroon in design
HEX
#800000
RGB
128, 0, 0
HSL
0°, 100%, 25%
HSV
0°, 100%, 50%
Maroon (#800000) is a dark brownish-red that signals institutional authority and tradition. It is one of the most common university and sports team colors, and works as a sophisticated dark accent in corporate and editorial design.
Best for
Corporate branding, executive reports, and enterprise-level web design.
Accessibility
White text on maroon passes AAA at 10.95:1, so it is safe for dark backgrounds and section headers.
How does maroon compare to nearby colors?
What is the difference between maroon and wine?
Wine (#722F37) carries less pigment punch than Maroon (#800000), so the pair separates by finish as much as hue. Maroon reads faster on screen, so it changes the palette from steady to attention-seeking more quickly than Wine does. Choose maroon when the color needs to register quickly and act like the headline accent; keep wine when the rest of the layout needs a quieter companion.
What color is maroon?
Maroon is one of the most widely used institutional colors, appearing in the branding of numerous universities including Texas A&M, Virginia Tech, and the University of Chicago. Its name derives from the French word "marron" meaning chestnut.
What is the hex code for maroon?
| Format | Value |
|---|---|
| HEX | #800000 |
| RGB | rgb(128, 0, 0) |
| HSL | hsl(0°, 100%, 25%) |
| HSV / HSB | hsv(0°, 100%, 50%) |
| CMYK (approx.) | cmyk(0%, 100%, 100%, 50%) |
Convert Maroon to other color formats
Open the color converter with Maroon (#800000) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Maroon in the color converter →What does maroon mean in design?
Maroon communicates tradition, resilience, and grounded authority. It is less aggressive than red but more dynamic than brown, making it a staple for institutions that want to project stability with warmth. In design, maroon works for heritage brands, educational institutions, and contexts that value trustworthiness over trendiness.
How do I use maroon in code?
| CSS (hex) | color: #800000; |
| CSS (rgb) | color: rgb(128, 0, 0); |
| CSS (hsl) | color: hsl(0, 100%, 25%); |
| RGB % | rgb(50%, 0%, 0%) |
| Tailwind | text-[#800000] |
| SwiftUI | Color(red: 0.502, green: 0.000, blue: 0.000) |
| UIKit | UIColor(red: 0.502, green: 0.000, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(128, 0, 0) |
| Compose | Color(0xFF800000) |
| Web Safe | #990000 |
Is maroon accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 10.95:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaBlack text on this color | 1.92:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on white | 10.95:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on black | 1.92:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does maroon look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with maroon
Gold lifts maroon without trying to outrun it; the result feels premium because the contrast is more about sheen and warmth than raw brightness.
White sharpens maroon without cooling it off, which is useful when you need a clean interface or slide layout around the color.
With a vivid maroon, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
What colors clash with maroon
Red can pull maroon toward warning-sign or promo energy, which is usually too specific if the rest of the layout wants range.
With maroon, Neon Green pushes the work toward novelty or screen-effect territory faster than most brand or editorial systems can tolerate.
How should I use maroon in design?
- •Maroon works as a primary brand color for institutions — pair with gold and white for the classic varsity aesthetic.
- •Use maroon backgrounds with cream text for slide decks that need to feel authoritative without the coldness of navy.
- •Combine maroon with sage green or olive for an earthy, heritage palette.
What are good maroon palettes?
Midnight authority
Corporate branding, executive reports, and enterprise-level web design.
Design with maroon in Moda
Create a presentation or document using maroon as your accent color. Moda's AI applies your color palette automatically.
Create a design with maroon →What are the shades and tints of maroon?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for maroon?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Dark Red
Dark Red lives in the same neighborhood as maroon, but the finish shift is enough to make one feel better for premium retail and sport and the other for a different visual context.
Carmine
Carmine is near enough to maroon to swap into the same palette, yet the undertone shift still decides whether the family reads warmer or cooler overall.
Burgundy
Burgundy is near enough to maroon to swap into the same palette, yet the undertone shift still decides whether the family reads warmer or cooler overall.
Oxblood
Oxblood stays very close to maroon in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Wine
Wine stays very close to maroon in hue, but it lands lighter, which makes it better for backgrounds, tints, and softer supporting areas than for accents, stronger hierarchy, and firmer structure.
Frequently asked questions
What is the hex code for maroon?
The hex code for maroon is #800000. In RGB, that's 128 red, 0 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 100% magenta, 100% yellow, and 50% key (black).
Is maroon a warm or cool color?
Maroon sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Should maroon lead the palette or stay in supporting roles?
Maroon has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does maroon work best in a layout?
Maroon has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is maroon accessible?
Maroon is strong enough for white text at 10.95:1 contrast, so it can handle dark panels, tags, and section headers without much trouble. As text on white, though, it is usually better reserved for larger headings or short accents than for long paragraphs.
More red colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Red colors
Compare maroon with other red tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Orange colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.