Blue Perennial

CSS

:root {
  --blue-perennial: #bcd7df;
  --blue-perennial-rgb: 188 215 223;
  --blue-perennial-oklch: oklch(0.862 0.031 217.5);
}

.element {
  color: var(--blue-perennial);
  background-color: hsl(194 35% 81%);
  border-color: oklch(0.862 0.031 217.5);
}

Tailwind CSS v4

@theme {
  --color-blue-perennial: #bcd7df;
  --color-blue-perennial-50: #ecf7fb;
  --color-blue-perennial-100: #ddebef;
  --color-blue-perennial-200: #c7d8dd;
  --color-blue-perennial-300: #a7bbc2;
  --color-blue-perennial-400: #8ba3ab;
  --color-blue-perennial-500: #708c94;
  --color-blue-perennial-600: #5f767d;
  --color-blue-perennial-700: #4c5e64;
  --color-blue-perennial-800: #364549;
  --color-blue-perennial-900: #253033;
  --color-blue-perennial-950: #141c1e;
}

SCSS

$blue-perennial: #bcd7df;
$blue-perennial-rgb: 188, 215, 223;
$blue-perennial-light: mix(#fff, $blue-perennial, 20%);
$blue-perennial-dark: mix(#000, $blue-perennial, 20%);

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