Blue Screen of Death

CSS

:root {
  --blue-screen-of-death: #0033bb;
  --blue-screen-of-death-rgb: 0 51 187;
  --blue-screen-of-death-oklch: oklch(0.407 0.215 263.4);
}

.element {
  color: var(--blue-screen-of-death);
  background-color: hsl(224 100% 37%);
  border-color: oklch(0.407 0.215 263.4);
}

Tailwind CSS v4

@theme {
  --color-blue-screen-of-death: #0033bb;
  --color-blue-screen-of-death-50: #d8f5ff;
  --color-blue-screen-of-death-100: #c5e7ff;
  --color-blue-screen-of-death-200: #a8d2ff;
  --color-blue-screen-of-death-300: #82b2ff;
  --color-blue-screen-of-death-400: #5996ff;
  --color-blue-screen-of-death-500: #3577ff;
  --color-blue-screen-of-death-600: #2e66e7;
  --color-blue-screen-of-death-700: #2451ba;
  --color-blue-screen-of-death-800: #113c8b;
  --color-blue-screen-of-death-900: #0b2963;
  --color-blue-screen-of-death-950: #011644;
}

SCSS

$blue-screen-of-death: #0033bb;
$blue-screen-of-death-rgb: 0, 51, 187;
$blue-screen-of-death-light: mix(#fff, $blue-screen-of-death, 20%);
$blue-screen-of-death-dark: mix(#000, $blue-screen-of-death, 20%);

.element {
  color: $blue-screen-of-death;
  box-shadow: 0 0 0 2px rgba($blue-screen-of-death, 0.35);
}