Scarlet

Bold and unapologetic — scarlet is the color of daring and defiance.

Shades 11

Base #ff2400

RGB 255, 36, 0

100

200

300

400

500

600

700

800

All Scarlet Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --scarlet-50: #fff4f2;
  --scarlet-100: #ffe2dd;
  --scarlet-200: #ffc4bb;
  --scarlet-300: #ff9c8e;
  --scarlet-400: #ff6451;
  --scarlet-500: #ff2400;
  --scarlet-600: #d91c00;
  --scarlet-700: #aa1600;
  --scarlet-800: #7a1000;
  --scarlet-900: #4d0a00;
  --scarlet-950: #270500;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        scarlet: {
          50: '#fff4f2',
          100: '#ffe2dd',
          200: '#ffc4bb',
          300: '#ff9c8e',
          400: '#ff6451',
          500: '#ff2400',
          600: '#d91c00',
          700: '#aa1600',
          800: '#7a1000',
          900: '#4d0a00',
          950: '#270500',
        },
      },
    },
  },
};

SCSS Map

$scarlet-palette: (
  50: #fff4f2,
  100: #ffe2dd,
  200: #ffc4bb,
  300: #ff9c8e,
  400: #ff6451,
  500: #ff2400,
  600: #d91c00,
  700: #aa1600,
  800: #7a1000,
  900: #4d0a00,
  950: #270500,
);