#1E3E93

CSS

:root {
  --cascade-twilight: #1e3e93;
  --cascade-twilight-rgb: 30 62 147;
  --cascade-twilight-oklch: oklch(0.395 0.145 264.8);
}

.element {
  color: var(--cascade-twilight);
  background-color: hsl(224 66% 35%);
  border-color: oklch(0.395 0.145 264.8);
}

Tailwind CSS v4

@theme {
  --color-cascade-twilight: #1e3e93;
  --color-cascade-twilight-50: #e2f5ff;
  --color-cascade-twilight-100: #d2e7ff;
  --color-cascade-twilight-200: #b8d3ff;
  --color-cascade-twilight-300: #96b5ff;
  --color-cascade-twilight-400: #749bf4;
  --color-cascade-twilight-500: #5580e5;
  --color-cascade-twilight-600: #496dc2;
  --color-cascade-twilight-700: #3a579c;
  --color-cascade-twilight-800: #264074;
  --color-cascade-twilight-900: #1a2c52;
  --color-cascade-twilight-950: #0a1937;
}

SCSS

$cascade-twilight: #1e3e93;
$cascade-twilight-rgb: 30, 62, 147;
$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);
}