Night Tide

CSS

:root {
  --night-tide: #455360;
  --night-tide-rgb: 69 83 96;
  --night-tide-oklch: oklch(0.435 0.028 246.5);
}

.element {
  color: var(--night-tide);
  background-color: hsl(209 16% 32%);
  border-color: oklch(0.435 0.028 246.5);
}

Tailwind CSS v4

@theme {
  --color-night-tide: #455360;
  --color-night-tide-50: #eff6fd;
  --color-night-tide-100: #e1e9f1;
  --color-night-tide-200: #cbd6e0;
  --color-night-tide-300: #adb9c5;
  --color-night-tide-400: #92a0ae;
  --color-night-tide-500: #788898;
  --color-night-tide-600: #657381;
  --color-night-tide-700: #515c67;
  --color-night-tide-800: #3a444c;
  --color-night-tide-900: #282f34;
  --color-night-tide-950: #161b20;
}

SCSS

$night-tide: #455360;
$night-tide-rgb: 69, 83, 96;
$night-tide-light: mix(#fff, $night-tide, 20%);
$night-tide-dark: mix(#000, $night-tide, 20%);

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