Blue Enchantment

CSS

:root {
  --blue-enchantment: #0d6376;
  --blue-enchantment-rgb: 13 99 118;
  --blue-enchantment-oklch: oklch(0.462 0.079 217.9);
}

.element {
  color: var(--blue-enchantment);
  background-color: hsl(191 80% 26%);
  border-color: oklch(0.462 0.079 217.9);
}

Tailwind CSS v4

@theme {
  --color-blue-enchantment: #0d6376;
  --color-blue-enchantment-50: #ddfbff;
  --color-blue-enchantment-100: #cceffa;
  --color-blue-enchantment-200: #afddec;
  --color-blue-enchantment-300: #89c2d4;
  --color-blue-enchantment-400: #65aabe;
  --color-blue-enchantment-500: #3e93a9;
  --color-blue-enchantment-600: #367c8f;
  --color-blue-enchantment-700: #2b6372;
  --color-blue-enchantment-800: #1d4954;
  --color-blue-enchantment-900: #13333a;
  --color-blue-enchantment-950: #041e25;
}

SCSS

$blue-enchantment: #0d6376;
$blue-enchantment-rgb: 13, 99, 118;
$blue-enchantment-light: mix(#fff, $blue-enchantment, 20%);
$blue-enchantment-dark: mix(#000, $blue-enchantment, 20%);

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