Below the Surface

CSS

:root {
  --below-the-surface: #0a2f7c;
  --below-the-surface-rgb: 10 47 124;
  --below-the-surface-oklch: oklch(0.336 0.137 262.4);
}

.element {
  color: var(--below-the-surface);
  background-color: hsl(221 85% 26%);
  border-color: oklch(0.336 0.137 262.4);
}

Tailwind CSS v4

@theme {
  --color-below-the-surface: #0a2f7c;
  --color-below-the-surface-50: #e2f6ff;
  --color-below-the-surface-100: #d1e8ff;
  --color-below-the-surface-200: #b7d4ff;
  --color-below-the-surface-300: #94b6fe;
  --color-below-the-surface-400: #729def;
  --color-below-the-surface-500: #5383e0;
  --color-below-the-surface-600: #476fbd;
  --color-below-the-surface-700: #385998;
  --color-below-the-surface-800: #254171;
  --color-below-the-surface-900: #192d50;
  --color-below-the-surface-950: #0a1a35;
}

SCSS

$below-the-surface: #0a2f7c;
$below-the-surface-rgb: 10, 47, 124;
$below-the-surface-light: mix(#fff, $below-the-surface, 20%);
$below-the-surface-dark: mix(#000, $below-the-surface, 20%);

.element {
  color: $below-the-surface;
  box-shadow: 0 0 0 2px rgba($below-the-surface, 0.35);
}