When Blue Met Red

CSS

:root {
  --when-blue-met-red: #584165;
  --when-blue-met-red-rgb: 88 65 101;
  --when-blue-met-red-oklch: oklch(0.415 0.065 312.9);
}

.element {
  color: var(--when-blue-met-red);
  background-color: hsl(278 22% 33%);
  border-color: oklch(0.415 0.065 312.9);
}

Tailwind CSS v4

@theme {
  --color-when-blue-met-red: #584165;
  --color-when-blue-met-red-50: #fcf0ff;
  --color-when-blue-met-red-100: #f0e2f7;
  --color-when-blue-met-red-200: #dfcce8;
  --color-when-blue-met-red-300: #c4aecf;
  --color-when-blue-met-red-400: #ac94ba;
  --color-when-blue-met-red-500: #957aa5;
  --color-when-blue-met-red-600: #7e678c;
  --color-when-blue-met-red-700: #655270;
  --color-when-blue-met-red-800: #4a3c53;
  --color-when-blue-met-red-900: #33293a;
  --color-when-blue-met-red-950: #1f1724;
}

SCSS

$when-blue-met-red: #584165;
$when-blue-met-red-rgb: 88, 65, 101;
$when-blue-met-red-light: mix(#fff, $when-blue-met-red, 20%);
$when-blue-met-red-dark: mix(#000, $when-blue-met-red, 20%);

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