Power Outage

CSS

:root {
  --power-outage: #332244;
  --power-outage-rgb: 51 34 68;
  --power-outage-oklch: oklch(0.29 0.063 305.9);
}

.element {
  color: var(--power-outage);
  background-color: hsl(270 33% 20%);
  border-color: oklch(0.29 0.063 305.9);
}

Tailwind CSS v4

@theme {
  --color-power-outage: #332244;
  --color-power-outage-50: #faf1ff;
  --color-power-outage-100: #eee3f9;
  --color-power-outage-200: #dcceea;
  --color-power-outage-300: #c0afd1;
  --color-power-outage-400: #a795bd;
  --color-power-outage-500: #907ca8;
  --color-power-outage-600: #7a698e;
  --color-power-outage-700: #625472;
  --color-power-outage-800: #473d54;
  --color-power-outage-900: #312a3b;
  --color-power-outage-950: #1d1725;
}

SCSS

$power-outage: #332244;
$power-outage-rgb: 51, 34, 68;
$power-outage-light: mix(#fff, $power-outage, 20%);
$power-outage-dark: mix(#000, $power-outage, 20%);

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