Blue Magpie

CSS

:root {
  --blue-magpie: #9ac0de;
  --blue-magpie-rgb: 154 192 222;
  --blue-magpie-oklch: oklch(0.79 0.059 242.3);
}

.element {
  color: var(--blue-magpie);
  background-color: hsl(206 51% 74%);
  border-color: oklch(0.79 0.059 242.3);
}

Tailwind CSS v4

@theme {
  --color-blue-magpie: #9ac0de;
  --color-blue-magpie-50: #e8f8ff;
  --color-blue-magpie-100: #d8ebfb;
  --color-blue-magpie-200: #c0d8ec;
  --color-blue-magpie-300: #9fbbd4;
  --color-blue-magpie-400: #80a3bf;
  --color-blue-magpie-500: #638baa;
  --color-blue-magpie-600: #547690;
  --color-blue-magpie-700: #435e73;
  --color-blue-magpie-800: #2f4555;
  --color-blue-magpie-900: #20303b;
  --color-blue-magpie-950: #101c25;
}

SCSS

$blue-magpie: #9ac0de;
$blue-magpie-rgb: 154, 192, 222;
$blue-magpie-light: mix(#fff, $blue-magpie, 20%);
$blue-magpie-dark: mix(#000, $blue-magpie, 20%);

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