Medium Red Violet

CSS

:root {
  --medium-red-violet: #bb3385;
  --medium-red-violet-rgb: 187 51 133;
  --medium-red-violet-oklch: oklch(0.552 0.189 348.1);
}

.element {
  color: var(--medium-red-violet);
  background-color: hsl(324 57% 47%);
  border-color: oklch(0.552 0.189 348.1);
}

Tailwind CSS v4

@theme {
  --color-medium-red-violet: #bb3385;
  --color-medium-red-violet-50: #ffe0fd;
  --color-medium-red-violet-100: #ffcef1;
  --color-medium-red-violet-200: #ffb2df;
  --color-medium-red-violet-300: #fe8cc5;
  --color-medium-red-violet-400: #eb69b2;
  --color-medium-red-violet-500: #d9409c;
  --color-medium-red-violet-600: #b73884;
  --color-medium-red-violet-700: #932d69;
  --color-medium-red-violet-800: #6d1f50;
  --color-medium-red-violet-900: #4d1538;
  --color-medium-red-violet-950: #320522;
}

SCSS

$medium-red-violet: #bb3385;
$medium-red-violet-rgb: 187, 51, 133;
$medium-red-violet-light: mix(#fff, $medium-red-violet, 20%);
$medium-red-violet-dark: mix(#000, $medium-red-violet, 20%);

.element {
  color: $medium-red-violet;
  box-shadow: 0 0 0 2px rgba($medium-red-violet, 0.35);
}