Terror From the Deep

CSS

:root {
  --terror-from-the-deep: #1d4769;
  --terror-from-the-deep-rgb: 29 71 105;
  --terror-from-the-deep-oklch: oklch(0.385 0.075 245.9);
}

.element {
  color: var(--terror-from-the-deep);
  background-color: hsl(207 57% 26%);
  border-color: oklch(0.385 0.075 245.9);
}

Tailwind CSS v4

@theme {
  --color-terror-from-the-deep: #1d4769;
  --color-terror-from-the-deep-50: #e5f8ff;
  --color-terror-from-the-deep-100: #d5ebff;
  --color-terror-from-the-deep-200: #bcd8f3;
  --color-terror-from-the-deep-300: #9abbdc;
  --color-terror-from-the-deep-400: #7aa3c8;
  --color-terror-from-the-deep-500: #5b8bb5;
  --color-terror-from-the-deep-600: #4e7699;
  --color-terror-from-the-deep-700: #3e5e7b;
  --color-terror-from-the-deep-800: #2b455a;
  --color-terror-from-the-deep-900: #1d303f;
  --color-terror-from-the-deep-950: #0d1c28;
}

SCSS

$terror-from-the-deep: #1d4769;
$terror-from-the-deep-rgb: 29, 71, 105;
$terror-from-the-deep-light: mix(#fff, $terror-from-the-deep, 20%);
$terror-from-the-deep-dark: mix(#000, $terror-from-the-deep, 20%);

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