High Altar

CSS

:root {
  --high-altar: #334f7b;
  --high-altar-rgb: 51 79 123;
  --high-altar-oklch: oklch(0.427 0.081 259.1);
}

.element {
  color: var(--high-altar);
  background-color: hsl(217 41% 34%);
  border-color: oklch(0.427 0.081 259.1);
}

Tailwind CSS v4

@theme {
  --color-high-altar: #334f7b;
  --color-high-altar-50: #e8f6ff;
  --color-high-altar-100: #d9e9ff;
  --color-high-altar-200: #c1d5f8;
  --color-high-altar-300: #a0b8e2;
  --color-high-altar-400: #82a0cf;
  --color-high-altar-500: #6587bc;
  --color-high-altar-600: #56729f;
  --color-high-altar-700: #455c7f;
  --color-high-altar-800: #30435e;
  --color-high-altar-900: #212e42;
  --color-high-altar-950: #101b2a;
}

SCSS

$high-altar: #334f7b;
$high-altar-rgb: 51, 79, 123;
$high-altar-light: mix(#fff, $high-altar, 20%);
$high-altar-dark: mix(#000, $high-altar, 20%);

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