The Blues Brothers

CSS

:root {
  --the-blues-brothers: #214daa;
  --the-blues-brothers-rgb: 33 77 170;
  --the-blues-brothers-oklch: oklch(0.447 0.157 262.7);
}

.element {
  color: var(--the-blues-brothers);
  background-color: hsl(221 67% 40%);
  border-color: oklch(0.447 0.157 262.7);
}

Tailwind CSS v4

@theme {
  --color-the-blues-brothers: #214daa;
  --color-the-blues-brothers-50: #dff5ff;
  --color-the-blues-brothers-100: #cee8ff;
  --color-the-blues-brothers-200: #b3d4ff;
  --color-the-blues-brothers-300: #8fb6ff;
  --color-the-blues-brothers-400: #6b9cfb;
  --color-the-blues-brothers-500: #4b80ed;
  --color-the-blues-brothers-600: #406dc8;
  --color-the-blues-brothers-700: #3357a1;
  --color-the-blues-brothers-800: #204078;
  --color-the-blues-brothers-900: #152c55;
  --color-the-blues-brothers-950: #071939;
}

SCSS

$the-blues-brothers: #214daa;
$the-blues-brothers-rgb: 33, 77, 170;
$the-blues-brothers-light: mix(#fff, $the-blues-brothers, 20%);
$the-blues-brothers-dark: mix(#000, $the-blues-brothers, 20%);

.element {
  color: $the-blues-brothers;
  box-shadow: 0 0 0 2px rgba($the-blues-brothers, 0.35);
}