Red

Passion, energy, and urgency — red commands attention like no other.

Shades 11

Base #ef4444

RGB 239, 68, 68

100

200

300

400

500

600

700

800

All Red Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
          950: '#450a0a',
        },
      },
    },
  },
};

SCSS Map

$red-palette: (
  50: #fef2f2,
  100: #fee2e2,
  200: #fecaca,
  300: #fca5a5,
  400: #f87171,
  500: #ef4444,
  600: #dc2626,
  700: #b91c1c,
  800: #991b1b,
  900: #7f1d1d,
  950: #450a0a,
);