Blue Depths

CSS

:root {
  --blue-depths: #2c3a64;
  --blue-depths-rgb: 44 58 100;
  --blue-depths-oklch: oklch(0.358 0.075 268.5);
}

.element {
  color: var(--blue-depths);
  background-color: hsl(225 39% 28%);
  border-color: oklch(0.358 0.075 268.5);
}

Tailwind CSS v4

@theme {
  --color-blue-depths: #2c3a64;
  --color-blue-depths-50: #edf5ff;
  --color-blue-depths-100: #dee7ff;
  --color-blue-depths-200: #c8d3f5;
  --color-blue-depths-300: #a8b6df;
  --color-blue-depths-400: #8c9dcc;
  --color-blue-depths-500: #7184b9;
  --color-blue-depths-600: #60709c;
  --color-blue-depths-700: #4c5a7d;
  --color-blue-depths-800: #36425d;
  --color-blue-depths-900: #252d41;
  --color-blue-depths-950: #141a2a;
}

SCSS

$blue-depths: #2c3a64;
$blue-depths-rgb: 44, 58, 100;
$blue-depths-light: mix(#fff, $blue-depths, 20%);
$blue-depths-dark: mix(#000, $blue-depths, 20%);

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