Lost in Sadness

CSS

:root {
  --lost-in-sadness: #151632;
  --lost-in-sadness-rgb: 21 22 50;
  --lost-in-sadness-oklch: oklch(0.216 0.054 279.3);
}

.element {
  color: var(--lost-in-sadness);
  background-color: hsl(238 41% 14%);
  border-color: oklch(0.216 0.054 279.3);
}

Tailwind CSS v4

@theme {
  --color-lost-in-sadness: #151632;
  --color-lost-in-sadness-50: #f2f4ff;
  --color-lost-in-sadness-100: #e4e6fa;
  --color-lost-in-sadness-200: #d0d2ec;
  --color-lost-in-sadness-300: #b2b5d3;
  --color-lost-in-sadness-400: #979cbf;
  --color-lost-in-sadness-500: #7e83aa;
  --color-lost-in-sadness-600: #6b6f90;
  --color-lost-in-sadness-700: #555973;
  --color-lost-in-sadness-800: #3d4155;
  --color-lost-in-sadness-900: #2a2d3b;
  --color-lost-in-sadness-950: #181a25;
}

SCSS

$lost-in-sadness: #151632;
$lost-in-sadness-rgb: 21, 22, 50;
$lost-in-sadness-light: mix(#fff, $lost-in-sadness, 20%);
$lost-in-sadness-dark: mix(#000, $lost-in-sadness, 20%);

.element {
  color: $lost-in-sadness;
  box-shadow: 0 0 0 2px rgba($lost-in-sadness, 0.35);
}