Pink

Warmth, romance, and playfulness — pink adds a tender pulse to any design.

Shades 11

Base #ec4899

RGB 236, 72, 153

100

200

300

400

500

600

700

800

All Pink Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --pink-950: #500724;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        pink: {
          50: '#fdf2f8',
          100: '#fce7f3',
          200: '#fbcfe8',
          300: '#f9a8d4',
          400: '#f472b6',
          500: '#ec4899',
          600: '#db2777',
          700: '#be185d',
          800: '#9d174d',
          900: '#831843',
          950: '#500724',
        },
      },
    },
  },
};

SCSS Map

$pink-palette: (
  50: #fdf2f8,
  100: #fce7f3,
  200: #fbcfe8,
  300: #f9a8d4,
  400: #f472b6,
  500: #ec4899,
  600: #db2777,
  700: #be185d,
  800: #9d174d,
  900: #831843,
  950: #500724,
);