Glimpse of Void

CSS

:root {
  --glimpse-of-void: #335588;
  --glimpse-of-void-rgb: 51 85 136;
  --glimpse-of-void-oklch: oklch(0.449 0.093 258.3);
}

.element {
  color: var(--glimpse-of-void);
  background-color: hsl(216 45% 37%);
  border-color: oklch(0.449 0.093 258.3);
}

Tailwind CSS v4

@theme {
  --color-glimpse-of-void: #335588;
  --color-glimpse-of-void-50: #e6f6ff;
  --color-glimpse-of-void-100: #d6e9ff;
  --color-glimpse-of-void-200: #bed6fd;
  --color-glimpse-of-void-300: #9cb9e8;
  --color-glimpse-of-void-400: #7ca0d5;
  --color-glimpse-of-void-500: #5f87c3;
  --color-glimpse-of-void-600: #5172a5;
  --color-glimpse-of-void-700: #405c84;
  --color-glimpse-of-void-800: #2d4362;
  --color-glimpse-of-void-900: #1e2f45;
  --color-glimpse-of-void-950: #0e1b2d;
}

SCSS

$glimpse-of-void: #335588;
$glimpse-of-void-rgb: 51, 85, 136;
$glimpse-of-void-light: mix(#fff, $glimpse-of-void, 20%);
$glimpse-of-void-dark: mix(#000, $glimpse-of-void, 20%);

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