Blue Grouse

CSS

:root {
  --blue-grouse: #9abcdc;
  --blue-grouse-rgb: 154 188 220;
  --blue-grouse-oklch: oklch(0.781 0.059 247);
}

.element {
  color: var(--blue-grouse);
  background-color: hsl(209 49% 73%);
  border-color: oklch(0.781 0.059 247);
}

Tailwind CSS v4

@theme {
  --color-blue-grouse: #9abcdc;
  --color-blue-grouse-50: #e9f7ff;
  --color-blue-grouse-100: #d9eafb;
  --color-blue-grouse-200: #c2d7ed;
  --color-blue-grouse-300: #a1bbd5;
  --color-blue-grouse-400: #83a2c0;
  --color-blue-grouse-500: #668aab;
  --color-blue-grouse-600: #577591;
  --color-blue-grouse-700: #455e74;
  --color-blue-grouse-800: #314556;
  --color-blue-grouse-900: #21303c;
  --color-blue-grouse-950: #111c26;
}

SCSS

$blue-grouse: #9abcdc;
$blue-grouse-rgb: 154, 188, 220;
$blue-grouse-light: mix(#fff, $blue-grouse, 20%);
$blue-grouse-dark: mix(#000, $blue-grouse, 20%);

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