Blue Heaven

CSS

:root {
  --blue-heaven: #5b7e98;
  --blue-heaven-rgb: 91 126 152;
  --blue-heaven-oklch: oklch(0.577 0.056 241.1);
}

.element {
  color: var(--blue-heaven);
  background-color: hsl(206 25% 48%);
  border-color: oklch(0.577 0.056 241.1);
}

Tailwind CSS v4

@theme {
  --color-blue-heaven: #5b7e98;
  --color-blue-heaven-50: #e8f8ff;
  --color-blue-heaven-100: #d8ebfa;
  --color-blue-heaven-200: #c0d8eb;
  --color-blue-heaven-300: #9fbbd3;
  --color-blue-heaven-400: #81a3bd;
  --color-blue-heaven-500: #648ba8;
  --color-blue-heaven-600: #55768e;
  --color-blue-heaven-700: #445e72;
  --color-blue-heaven-800: #304554;
  --color-blue-heaven-900: #21303b;
  --color-blue-heaven-950: #101c25;
}

SCSS

$blue-heaven: #5b7e98;
$blue-heaven-rgb: 91, 126, 152;
$blue-heaven-light: mix(#fff, $blue-heaven, 20%);
$blue-heaven-dark: mix(#000, $blue-heaven, 20%);

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