Medium Violet Red

CSS

:root {
  --medium-violet-red: #c71585;
  --medium-violet-red-rgb: 199 21 133;
  --medium-violet-red-oklch: oklch(0.553 0.222 349.7);
}

.element {
  color: var(--medium-violet-red);
  background-color: hsl(322 81% 43%);
  border-color: oklch(0.553 0.222 349.7);
}

Tailwind CSS v4

@theme {
  --color-medium-violet-red: #c71585;
  --color-medium-violet-red-50: #ffdcfc;
  --color-medium-violet-red-100: #ffc9f0;
  --color-medium-violet-red-200: #ffabdf;
  --color-medium-violet-red-300: #ff82c4;
  --color-medium-violet-red-400: #f85ab1;
  --color-medium-violet-red-500: #e6219b;
  --color-medium-violet-red-600: #c22183;
  --color-medium-violet-red-700: #9c1b69;
  --color-medium-violet-red-800: #741250;
  --color-medium-violet-red-900: #520c38;
  --color-medium-violet-red-950: #360022;
}

SCSS

$medium-violet-red: #c71585;
$medium-violet-red-rgb: 199, 21, 133;
$medium-violet-red-light: mix(#fff, $medium-violet-red, 20%);
$medium-violet-red-dark: mix(#000, $medium-violet-red, 20%);

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