Middle Red Purple

CSS

:root {
  --middle-red-purple: #210837;
  --middle-red-purple-rgb: 33 8 55;
  --middle-red-purple-oklch: oklch(0.208 0.086 304);
}

.element {
  color: var(--middle-red-purple);
  background-color: hsl(272 75% 12%);
  border-color: oklch(0.208 0.086 304);
}

Tailwind CSS v4

@theme {
  --color-middle-red-purple: #210837;
  --color-middle-red-purple-50: #fbefff;
  --color-middle-red-purple-100: #efe1ff;
  --color-middle-red-purple-200: #ddcbf2;
  --color-middle-red-purple-300: #c2acdb;
  --color-middle-red-purple-400: #a992c8;
  --color-middle-red-purple-500: #9377b5;
  --color-middle-red-purple-600: #7c6599;
  --color-middle-red-purple-700: #63517b;
  --color-middle-red-purple-800: #483b5b;
  --color-middle-red-purple-900: #322940;
  --color-middle-red-purple-950: #1e1629;
}

SCSS

$middle-red-purple: #210837;
$middle-red-purple-rgb: 33, 8, 55;
$middle-red-purple-light: mix(#fff, $middle-red-purple, 20%);
$middle-red-purple-dark: mix(#000, $middle-red-purple, 20%);

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