When Red Met Blue

CSS

:root {
  --when-red-met-blue: #564375;
  --when-red-met-blue-rgb: 86 67 117;
  --when-red-met-blue-oklch: oklch(0.425 0.083 300.4);
}

.element {
  color: var(--when-red-met-blue);
  background-color: hsl(263 27% 36%);
  border-color: oklch(0.425 0.083 300.4);
}

Tailwind CSS v4

@theme {
  --color-when-red-met-blue: #564375;
  --color-when-red-met-blue-50: #f9f0ff;
  --color-when-red-met-blue-100: #ede2ff;
  --color-when-red-met-blue-200: #dbccf3;
  --color-when-red-met-blue-300: #bfaedb;
  --color-when-red-met-blue-400: #a693c9;
  --color-when-red-met-blue-500: #8f79b5;
  --color-when-red-met-blue-600: #796799;
  --color-when-red-met-blue-700: #61527b;
  --color-when-red-met-blue-800: #463c5b;
  --color-when-red-met-blue-900: #302940;
  --color-when-red-met-blue-950: #1d1729;
}

SCSS

$when-red-met-blue: #564375;
$when-red-met-blue-rgb: 86, 67, 117;
$when-red-met-blue-light: mix(#fff, $when-red-met-blue, 20%);
$when-red-met-blue-dark: mix(#000, $when-red-met-blue, 20%);

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