Crimson

Fierce and dramatic — crimson carries the weight of royalty and revolution.

Shades 11

Base #dc143c

RGB 220, 20, 60

100

200

300

400

500

600

700

800

All Crimson Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --crimson-50: #fff0f3;
  --crimson-100: #ffd6de;
  --crimson-200: #ffadbf;
  --crimson-300: #ff7a9a;
  --crimson-400: #f44271;
  --crimson-500: #dc143c;
  --crimson-600: #b80d2f;
  --crimson-700: #900a24;
  --crimson-800: #6a071a;
  --crimson-900: #43040f;
  --crimson-950: #220207;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        crimson: {
          50: '#fff0f3',
          100: '#ffd6de',
          200: '#ffadbf',
          300: '#ff7a9a',
          400: '#f44271',
          500: '#dc143c',
          600: '#b80d2f',
          700: '#900a24',
          800: '#6a071a',
          900: '#43040f',
          950: '#220207',
        },
      },
    },
  },
};

SCSS Map

$crimson-palette: (
  50: #fff0f3,
  100: #ffd6de,
  200: #ffadbf,
  300: #ff7a9a,
  400: #f44271,
  500: #dc143c,
  600: #b80d2f,
  700: #900a24,
  800: #6a071a,
  900: #43040f,
  950: #220207,
);