Blue Beetle

CSS

:root {
  --blue-beetle: #220099;
  --blue-beetle-rgb: 34 0 153;
  --blue-beetle-oklch: oklch(0.323 0.205 273.7);
}

.element {
  color: var(--blue-beetle);
  background-color: hsl(253 100% 30%);
  border-color: oklch(0.323 0.205 273.7);
}

Tailwind CSS v4

@theme {
  --color-blue-beetle: #220099;
  --color-blue-beetle-50: #e4f1ff;
  --color-blue-beetle-100: #d4e3ff;
  --color-blue-beetle-200: #bcccff;
  --color-blue-beetle-300: #9bacff;
  --color-blue-beetle-400: #7b8fff;
  --color-blue-beetle-500: #6170ff;
  --color-blue-beetle-600: #525fe1;
  --color-blue-beetle-700: #414cb5;
  --color-blue-beetle-800: #2b3888;
  --color-blue-beetle-900: #1d2660;
  --color-blue-beetle-950: #0e1442;
}

SCSS

$blue-beetle: #220099;
$blue-beetle-rgb: 34, 0, 153;
$blue-beetle-light: mix(#fff, $blue-beetle, 20%);
$blue-beetle-dark: mix(#000, $blue-beetle, 20%);

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