Alpine Race

CSS

:root {
  --alpine-race: #234162;
  --alpine-race-rgb: 35 65 98;
  --alpine-race-oklch: oklch(0.369 0.068 252.1);
}

.element {
  color: var(--alpine-race);
  background-color: hsl(211 47% 26%);
  border-color: oklch(0.369 0.068 252.1);
}

Tailwind CSS v4

@theme {
  --color-alpine-race: #234162;
  --color-alpine-race-50: #e8f7ff;
  --color-alpine-race-100: #d9eaff;
  --color-alpine-race-200: #c1d6f1;
  --color-alpine-race-300: #a0bada;
  --color-alpine-race-400: #82a1c6;
  --color-alpine-race-500: #6589b2;
  --color-alpine-race-600: #567496;
  --color-alpine-race-700: #445d79;
  --color-alpine-race-800: #304459;
  --color-alpine-race-900: #212f3e;
  --color-alpine-race-950: #101c28;
}

SCSS

$alpine-race: #234162;
$alpine-race-rgb: 35, 65, 98;
$alpine-race-light: mix(#fff, $alpine-race, 20%);
$alpine-race-dark: mix(#000, $alpine-race, 20%);

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