Blue Bauble

CSS

:root {
  --blue-bauble: #abdee3;
  --blue-bauble-rgb: 171 222 227;
  --blue-bauble-oklch: oklch(0.867 0.053 203.7);
}

.element {
  color: var(--blue-bauble);
  background-color: hsl(185 50% 78%);
  border-color: oklch(0.867 0.053 203.7);
}

Tailwind CSS v4

@theme {
  --color-blue-bauble: #abdee3;
  --color-blue-bauble-50: #e5fafc;
  --color-blue-bauble-100: #d5edf0;
  --color-blue-bauble-200: #bbdbdf;
  --color-blue-bauble-300: #99c0c5;
  --color-blue-bauble-400: #79a8ad;
  --color-blue-bauble-500: #5a9196;
  --color-blue-bauble-600: #4d7a7f;
  --color-blue-bauble-700: #3d6266;
  --color-blue-bauble-800: #2c484a;
  --color-blue-bauble-900: #1d3233;
  --color-blue-bauble-950: #0d1e1f;
}

SCSS

$blue-bauble: #abdee3;
$blue-bauble-rgb: 171, 222, 227;
$blue-bauble-light: mix(#fff, $blue-bauble, 20%);
$blue-bauble-dark: mix(#000, $blue-bauble, 20%);

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