Depths of Night

CSS

:root {
  --depths-of-night: #2c319b;
  --depths-of-night-rgb: 44 49 155;
  --depths-of-night-oklch: oklch(0.385 0.168 273.2);
}

.element {
  color: var(--depths-of-night);
  background-color: hsl(237 56% 39%);
  border-color: oklch(0.385 0.168 273.2);
}

Tailwind CSS v4

@theme {
  --color-depths-of-night: #2c319b;
  --color-depths-of-night-50: #e7f2ff;
  --color-depths-of-night-100: #d7e4ff;
  --color-depths-of-night-200: #bfcfff;
  --color-depths-of-night-300: #9fafff;
  --color-depths-of-night-400: #7f94ff;
  --color-depths-of-night-500: #6478f4;
  --color-depths-of-night-600: #5566cd;
  --color-depths-of-night-700: #4451a5;
  --color-depths-of-night-800: #2e3c7c;
  --color-depths-of-night-900: #1f2957;
  --color-depths-of-night-950: #0f163b;
}

SCSS

$depths-of-night: #2c319b;
$depths-of-night-rgb: 44, 49, 155;
$depths-of-night-light: mix(#fff, $depths-of-night, 20%);
$depths-of-night-dark: mix(#000, $depths-of-night, 20%);

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