Explore the base color
Review HEX, RGB, HSL, and HSV for maroon, then browse shades, tints, tones, and hues.
Color tools
Maroon color codes
Maroon color codes for #800000 — HEX, RGB, HSL, HSV, shades, named maroons, and copy-ready CSS.
Loading tool…
Loading Preparing tool…
How to use
Follow these steps for a clear answer.
Pick a variation or named shade
Click a generated strip or a CSS named maroon shade to load codes and harmonies.
Copy for CSS
Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.
Color formulas
Core relationships used by this color tool.
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.
Example colors
Common picks with formula and result.
ϟ
color: maroon;Base maroon
CSS keyword
#800000 · rgb(128, 0, 0)
ϟ
redRelated shade
Family neighbor
#FF0000
ϟ
background-color: #800000;UI accent
Background use
Pair with readable text
ϟ
H + 180°Complement direction
Harmony hint
Toward teal-green
Maroon color family specification
Version 1.0.0
- Definition
- Maroon in CSS centers on the keyword maroon (#800000 / rgb(128, 0, 0) / hsl(0°, 100%, 25%)). Designers use maroon families for rich, formal, and grounded on screens.
- What it calculates
- Maroon family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
- Inputs
- Selected variation chip, named shade, or harmony swatch
- Section mode (variations, named shades, harmonies)
- Outputs
- HEX, RGB, HSL, HSV
- Optional CSS keyword
- Contrast ratios on white and black
- Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circleMaroon feels academic and classic—common for brands that want warmth without neon red.
For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.
:root { --maroon: #800000; --maroon-soft: #cd5c5c; --maroon-ink: #5c0000; } .banner { background-color: var(--maroon); color: #ffffff; }- Popular CSS maroons
Name HEX RGB Feel maroon #800000 128, 0, 0 Base keyword red #FF0000 255, 0, 0 Named shade darkred #8B0000 139, 0, 0 Dark shade brown #A52A2A 165, 42, 42 Named shade firebrick #B22222 178, 34, 34 Named shade indianred #CD5C5C 205, 92, 92 Named shade crimson #DC143C 220, 20, 60 Named shade darksalmon #E9967A 233, 150, 122 Dark shade lightcoral #F08080 240, 128, 128 Light tint salmon #FA8072 250, 128, 114 Named shade i Related hues may appear in Named shades when useful for maroon-adjacent palettes.- Assumptions
- Base keyword maroon = #800000 in sRGB.
- Named list uses CSS Color Module keywords in/near the maroon family.
- Tool runs locally; nothing is uploaded.
- Units
- HEX: #RRGGBB
- RGB: 0–255
- HSL/HSV: hue degrees; S/L/V percent
- Boundary conditions
- Lightness/saturation steps stay within visible ranges (~0–100%).
- Hue offsets wrap modulo 360°.
- Example
- maroon → #800000; complementary toward teal-green
- Validation cases
- maroon → #800000
- red → #FF0000
- shade of maroon → same hue, lower lightness
- tint of maroon → same hue, higher lightness
- Sources
- CSS Color Module named colors (maroon family)
- Classical shade/tint/tone and hue-harmony geometry
- WCAG relative-luminance contrast
- Calculation version
- 1.0.0
Related tools
Frequently asked questions
Key distinctions behind the tool.
What is the hex code for maroon?
The CSS named color maroon is #800000, equal to rgb(128, 0, 0) and hsl(0°, 100%, 25%).
What is the difference between maroon and red?
Maroon is half-intensity dark red. Pure red is brighter and more attention-grabbing.
What colors go with maroon?
Cream, gold, and soft gray suit maroon. Avoid stacking with other dark reds without enough contrast. Always check text contrast.
Is maroon good for body text?
Maroon on white often reads well for headings; check contrast if you place light text on maroon backgrounds.
How do I use maroon in CSS?
Use color: maroon;, color: #800000;, or color: rgb(128, 0, 0); on any property that accepts a <color> value, including background-color and border-color.