Rose

Delicate beauty and passion — rose embodies love in every shade.

Shades 11

Base #f43f5e

RGB 244, 63, 94

100

200

300

400

500

600

700

800

All Rose Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecdd3;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;
  --rose-800: #9f1239;
  --rose-900: #881337;
  --rose-950: #4c0519;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        rose: {
          50: '#fff1f2',
          100: '#ffe4e6',
          200: '#fecdd3',
          300: '#fda4af',
          400: '#fb7185',
          500: '#f43f5e',
          600: '#e11d48',
          700: '#be123c',
          800: '#9f1239',
          900: '#881337',
          950: '#4c0519',
        },
      },
    },
  },
};

SCSS Map

$rose-palette: (
  50: #fff1f2,
  100: #ffe4e6,
  200: #fecdd3,
  300: #fda4af,
  400: #fb7185,
  500: #f43f5e,
  600: #e11d48,
  700: #be123c,
  800: #9f1239,
  900: #881337,
  950: #4c0519,
);