Maroon Color Palettes
237 palettes tagged #maroon
Deep, sophisticated maroon and burgundy palettes with a rich, vintage feel.
Maroon color in CSS
The maroon reference values and ready-to-paste CSS variables. Click any value to copy it.
:root {
--maroon-50: #EFD9D9;
--maroon-200: #C97A7A;
--maroon-400: #A03333;
--maroon-600: #6A1B1B;
--maroon-800: #3E0A0A;
}
Prefer Tailwind? Drop these hex codes into the colors key of your tailwind.config.js, or copy any palette above as a full Tailwind config.
About Maroon Color Palettes
What does maroon represent in design?
Maroon is a brownish-red that feels grounded, refined and confident. It carries red's warmth but reads as mature and elegant — popular with wine, fashion and editorial brands.
Popular maroon shades & how to use them
Maroon palettes often build on shades like #EFD9D9, #C97A7A, #A03333, #6A1B1B, #3E0A0A. Click any palette above to copy its hex codes, CSS, or Tailwind values straight into your project — combine lighter tints for backgrounds with deeper tones for text and accents.