Impulse

CSS

:root {
  --impulse: #005b87;
  --impulse-rgb: 0 91 135;
  --impulse-oklch: oklch(0.449 0.102 239.5);
}

.element {
  color: var(--impulse);
  background-color: hsl(200 100% 26%);
  border-color: oklch(0.449 0.102 239.5);
}

Tailwind CSS v4

@theme {
  --color-impulse: #005b87;
  --color-impulse-50: #dcfaff;
  --color-impulse-100: #cbedff;
  --color-impulse-200: #aedbfc;
  --color-impulse-300: #88bee7;
  --color-impulse-400: #62a7d4;
  --color-impulse-500: #3b8ec2;
  --color-impulse-600: #3379a4;
  --color-impulse-700: #296184;
  --color-impulse-800: #1a4761;
  --color-impulse-900: #113144;
  --color-impulse-950: #031d2c;
}

SCSS

$impulse: #005b87;
$impulse-rgb: 0, 91, 135;
$impulse-light: mix(#fff, $impulse, 20%);
$impulse-dark: mix(#000, $impulse, 20%);

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