#hexpedia

Named color category

Maroon Colors

Maroon colors are dark, low-lightness reds that read formal, grounded, and restrained.

Indexed maroon hex colors

A reference grid selected from Hexpedia CSS, xkcd, Material, Tailwind, and generated static color datasets.

Reference #800000#800000Dark Red#840000Indian Red#850E04Blood#770001Dark Red#8B0000Crimson#8C000FBrick Red#8F1402Tailwind Red 800#991B1BReference #802000#802000Blood Red#980002Carmine#9D0216Reddy Brown#6E1005Deep Red#9A0200Red Brown#8B2E16Burnt Red#9F2305Reference #A00020#A00020Tailwind Orange 800#9A3412Reference #A02000#A02000Tailwind Red 900#7F1D1DReference #A00000#A00000Reference #802020#802020Reference #600000#600000Darkish Red#A90308Reference #800020#800020Rust Red#AA2704Claret#680018Dried Blood#4B0101Mahogany#4A0100Reference #602020#602020Deep Brown#410200
Tailwind Red 950#450A0AReference #400000#400000Tailwind Orange 950#431407Dark Maroon#3C0008Purple Brown#673A3FMaterial Brown 600#6D4C41Purplish Brown#6B4247Reference #402020#402020Material Brown 700#5D4037Reference #604040#604040Material Brown 800#4E342EMaterial Brown 900#3E2723Reference #200000#200000Very Dark Brown#1D0200WordPress Gray#444140Tailwind Stone 800#292524Reference #404040#404040Material Gray 800#424242Go Dark#333333Airbnb Black#484848Adobe Dark#2C2C2CSpotify Black#191414Tailwind Neutral 600#525252YouTube Almost Black#282828Tailwind Neutral 800#262626Material Gray 900#212121Reference #202020#202020GitHub GitHub Black#181717Tailwind Neutral 900#171717Pinterest Black#111111

Light Maroon

Reference #800000#800000Dark Red#840000Indian Red#850E04Blood#770001Dark Red#8B0000Crimson#8C000FBrick Red#8F1402Tailwind Red 800#991B1BReference #802000#802000Blood Red#980002Carmine#9D0216Reddy Brown#6E1005

Dark Maroon

Reference #800000#800000Dark Red#840000Indian Red#850E04Blood#770001Dark Red#8B0000Crimson#8C000FBrick Red#8F1402Tailwind Red 800#991B1BReference #802000#802000Blood Red#980002Carmine#9D0216Reddy Brown#6E1005

Muted Maroon

Purple Brown#673A3FMaterial Brown 600#6D4C41Purplish Brown#6B4247Reference #402020#402020Material Brown 700#5D4037Reference #604040#604040Material Brown 800#4E342EMaterial Brown 900#3E2723WordPress Gray#444140Tailwind Stone 800#292524Reference #404040#404040Material Gray 800#424242

Vibrant Maroon

Reference #800000#800000Dark Red#840000Indian Red#850E04Blood#770001Dark Red#8B0000Crimson#8C000FBrick Red#8F1402Tailwind Red 800#991B1BReference #802000#802000Blood Red#980002Carmine#9D0216Reddy Brown#6E1005

How designers use maroon

Maroon colors are most useful when they are treated as a family rather than a single swatch. Start with the central values for accents, then use lighter versions for surfaces and darker versions for text, borders, or active states. In product interfaces, maroon can guide attention, but it should not carry meaning alone; pair it with labels, spacing, and predictable hierarchy. For editorial pages, this family can create a recognizable mood while still leaving room for neutral backgrounds. Always test contrast before using any maroon value behind body text, because perceived brightness can shift quickly across adjacent hues.

Combinations with maroon

Palette pages use Maroon as the nearest stable anchor for this color family.

Amber + Maroon#FFBF00#800000Beige + Maroon#F5F5DC#800000Black + Maroon#000000#800000Blue + Maroon#0000FF#800000Brown + Maroon#8B4513#800000Cyan + Maroon#00FFFF#800000Gold + Maroon#FFD700#800000Gray + Maroon#808080#800000

Build with maroon in CSS Forge

Move from reference values into practical CSS experiments with pre-filled generator links.

Build a maroon gradientTint a shadow