#2B448C

CSS

:root {
  --cascade-twilight: #2b448c;
  --cascade-twilight-rgb: 43 68 140;
  --cascade-twilight-oklch: oklch(0.409 0.123 266.5);
}

.element {
  color: var(--cascade-twilight);
  background-color: hsl(225 53% 36%);
  border-color: oklch(0.409 0.123 266.5);
}

Tailwind CSS v4

@theme {
  --color-cascade-twilight: #2b448c;
  --color-cascade-twilight-50: #e6f5ff;
  --color-cascade-twilight-100: #d6e7ff;
  --color-cascade-twilight-200: #bed3ff;
  --color-cascade-twilight-300: #9db5f7;
  --color-cascade-twilight-400: #7d9ce8;
  --color-cascade-twilight-500: #6082d8;
  --color-cascade-twilight-600: #526eb6;
  --color-cascade-twilight-700: #415892;
  --color-cascade-twilight-800: #2d416d;
  --color-cascade-twilight-900: #1e2d4d;
  --color-cascade-twilight-950: #0e1933;
}

SCSS

$cascade-twilight: #2b448c;
$cascade-twilight-rgb: 43, 68, 140;
$cascade-twilight-light: mix(#fff, $cascade-twilight, 20%);
$cascade-twilight-dark: mix(#000, $cascade-twilight, 20%);

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