Maroon Color
Maroon is a pink color with hex code #B03060. This page covers its meaning, all color values, harmonies, colors that go with maroon, shades, tints, similar colors, CSS examples, FAQs, and WCAG contrast ratios.
Maroon Color Values
What Does Maroon Mean?
Maroon belongs to the pink family of colors. Pinks are red with the volume turned down. Soft ones read as gentle and personal; hot ones shout happily. Beauty packaging owns the pastel end, youth brands own the neon end, and dusty millennial pink had its entire decade. Maroon sits at a mid-lightness, which keeps it readable on both white and black without much fuss.
In the ISCC-NBS color naming system, Maroon is classified as a red (nearest centroid: strong purplish red, #B3446C). It is also known as Blood Thorn.
Color Harmonies
Complementary
Analogous
Triadic
Colors That Go With Maroon
Maroon and #30B081 are complements, parked opposite each other on the wheel. Together they hit maximum contrast, so a rough 70/30 split keeps the pairing from shouting.
Analogous neighbors — #B0309F and #B04130, which sit beside maroon on the wheel. Pairings like this feel calm and settled, which suits backgrounds and gradients.
For an energetic three-color palette, pair maroon with triadic partners #5FB030 and #305FB0. All three sit evenly spaced around the wheel, so the scheme stays lively without clashing.
Build and test these combinations in our Color Wheel Tool or check text readability with the Contrast Checker.
Tints and Shades
Tints (lighter)
Shades (darker)
Similar Colors
- Hibiscus —
#B6316C(Delta E 6) - Night Shadz —
#AA375A(Delta E 6) - Blush —
#B44668(Delta E 8) - Berry —
#990F4B(Delta E 8) - Dark Pink —
#CB416B(Delta E 9)
CSS Examples
.text { color: #B03060; }
.background { background-color: #B03060; }
.border { border: 2px solid #B03060; }
.shadow { box-shadow: 0 4px 6px #B0306040; }WCAG Contrast
Frequently Asked Questions
What is the hex code for maroon?
Maroon has the hex code #B03060. In RGB notation it is rgb(176, 48, 96), in HSL it is hsl(338, 57%, 44%), and its OKLCH value is 0.518, 0.168, 2.4.
What does the color maroon mean?
Pink-family colors like maroon carry distinct psychological associations. Maroon belongs to the pink family of colors. Pinks are red with the volume turned down. Soft ones read as gentle and personal; hot ones shout happily. Beauty packaging owns the pastel end, youth brands own the neon end, and dusty millennial pink had its entire decade. Maroon sits at a mid-lightness, which keeps it readable on both white and black without much fuss.
What colors go with maroon?
Maroon has three easy routes: its complement #30B081 for punch, its neighbors #B0309F and #B04130 for something calmer, or triadic partners #5FB030 and #305FB0 when you want energy.
Is maroon a standard web color?
No — Maroon is not a CSS keyword. Use its hex value #B03060 or any RGB/HSL equivalent in your stylesheets.
How do I make maroon lighter or darker?
To lighten maroon, add white to create tints; to darken it, add black to create shades. The tints and shades table above shows five computed steps of each, from #F5DBE5 (lightest tint) to #1C080F (darkest shade).
About Maroon
Maroon is classified as a Red in the ISCC-NBS color naming system, within the Pink hue family. It has alternative names including Blood Thorn. The color is recognized by X11, meodai.
Use our Color Converter to convert #B03060 to any other color format, or explore the Color Wheel to find harmonious color combinations.