Bonnie Blue

CSS

:root {
  --bonnie-blue: #8dbbd1;
  --bonnie-blue-rgb: 141 187 209;
  --bonnie-blue-oklch: oklch(0.767 0.058 228.9);
}

.element {
  color: var(--bonnie-blue);
  background-color: hsl(199 42% 69%);
  border-color: oklch(0.767 0.058 228.9);
}

Tailwind CSS v4

@theme {
  --color-bonnie-blue: #8dbbd1;
  --color-bonnie-blue-50: #e5f9ff;
  --color-bonnie-blue-100: #d5ecf8;
  --color-bonnie-blue-200: #bcd9e9;
  --color-bonnie-blue-300: #9abdd0;
  --color-bonnie-blue-400: #7ba6ba;
  --color-bonnie-blue-500: #5c8ea5;
  --color-bonnie-blue-600: #4f788b;
  --color-bonnie-blue-700: #3f6070;
  --color-bonnie-blue-800: #2c4752;
  --color-bonnie-blue-900: #1e3139;
  --color-bonnie-blue-950: #0d1d23;
}

SCSS

$bonnie-blue: #8dbbd1;
$bonnie-blue-rgb: 141, 187, 209;
$bonnie-blue-light: mix(#fff, $bonnie-blue, 20%);
$bonnie-blue-dark: mix(#000, $bonnie-blue, 20%);

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