Maroon

Bold and grounded — maroon commands respect with deep, earthy authority.

Shades 11

Base #800000

RGB 128, 0, 0

100

200

300

400

500

600

700

800

All Maroon Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --maroon-50: #fff4f4;
  --maroon-100: #ffe2e2;
  --maroon-200: #ffbdbd;
  --maroon-300: #ff8484;
  --maroon-400: #e84040;
  --maroon-500: #800000;
  --maroon-600: #660000;
  --maroon-700: #4d0000;
  --maroon-800: #330000;
  --maroon-900: #1a0000;
  --maroon-950: #0d0000;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        maroon: {
          50: '#fff4f4',
          100: '#ffe2e2',
          200: '#ffbdbd',
          300: '#ff8484',
          400: '#e84040',
          500: '#800000',
          600: '#660000',
          700: '#4d0000',
          800: '#330000',
          900: '#1a0000',
          950: '#0d0000',
        },
      },
    },
  },
};

SCSS Map

$maroon-palette: (
  50: #fff4f4,
  100: #ffe2e2,
  200: #ffbdbd,
  300: #ff8484,
  400: #e84040,
  500: #800000,
  600: #660000,
  700: #4d0000,
  800: #330000,
  900: #1a0000,
  950: #0d0000,
);