Maroon Color Palettes

238 palettes tagged #maroon

Deep, sophisticated maroon and burgundy palettes with a rich, vintage feel.

See what colors go with Maroon Maroon aesthetic
Related: #cool #web #sunset #autumn #energetic #sky #branding #fashion #earth #print #playful #vibrant #romantic #winter #gradient #ui #soft #calm #illustration #muted #orange #mysterious #earthy #spring #forest #photography #jewel-tones
Showing 60 of 238

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.

Copied!