Birdie Num Num

CSS

:root {
  --birdie-num-num: #89acda;
  --birdie-num-num-rgb: 137 172 218;
  --birdie-num-num-oklch: oklch(0.736 0.077 255.4);
}

.element {
  color: var(--birdie-num-num);
  background-color: hsl(214 52% 70%);
  border-color: oklch(0.736 0.077 255.4);
}

Tailwind CSS v4

@theme {
  --color-birdie-num-num: #89acda;
  --color-birdie-num-num-50: #e8f6ff;
  --color-birdie-num-num-100: #d8e9ff;
  --color-birdie-num-num-200: #c0d6f6;
  --color-birdie-num-num-300: #9fb9df;
  --color-birdie-num-num-400: #80a1cc;
  --color-birdie-num-num-500: #6388b9;
  --color-birdie-num-num-600: #54739c;
  --color-birdie-num-num-700: #435c7d;
  --color-birdie-num-num-800: #2f445d;
  --color-birdie-num-num-900: #202f41;
  --color-birdie-num-num-950: #0f1b2a;
}

SCSS

$birdie-num-num: #89acda;
$birdie-num-num-rgb: 137, 172, 218;
$birdie-num-num-light: mix(#fff, $birdie-num-num, 20%);
$birdie-num-num-dark: mix(#000, $birdie-num-num, 20%);

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