Maroon vs Firebrick

What is the difference between Maroon and Firebrick?

Comparing Maroon (#800000) and Firebrick (#B22222) reveals interesting optical contrasts. In terms of color intensity, Maroon is visibly more vibrant and saturated. Under screen illumination, Firebrick is significantly brighter and reflects more light. They have a close hue coordinate distance of 0°, representing a harmonized adjacent relationship.

Design recommendations for Maroon vs Firebrick

When choosing between Maroon and Firebrick for interface designs, consider their visual weight. Since Maroon is darker, it serves as a solid base for structural layouts or heavy typography, while the lighter Firebrick is ideal for backgrounds or high-visibility accents. Testing their contrast ratio is essential to meet WCAG accessibility guidelines.

Readability & Contrast Testing

Visual test showing black and white text overlay readability on both colors.

Maroon Typography

Preview of dark and light text elements rendered over a solid Maroon background canvas.

White Text: 10.95:1 Black Text: 1.92:1

Firebrick Typography

Preview of dark and light text elements rendered over a solid Firebrick background canvas.

White Text: 6.68:1 Black Text: 3.14:1

Technical Specifications Comparison

Format / Value Maroon Firebrick Delta / Difference
HEX Code #800000 #B22222 -
RGB Channels rgb(128, 0, 0) rgb(178, 34, 34) R:+50 | G:+34 | B:+34
HSL Values hsl(0°, 100%, 25%) hsl(0°, 68%, 42%) H:0° | S:-32% | L:+17%
CMYK (Print) cmyk(0%, 100%, 100%, 50%) cmyk(0%, 81%, 81%, 30%) -

Individual Color References

Maroon Reference Sheet HEX, RGB, HSL and print codes
Firebrick Reference Sheet HEX, RGB, HSL and print codes
Copied!