Canopy Bed

CSS

:root {
  --canopy-bed: #aabfd8;
  --canopy-bed-rgb: 170 191 216;
  --canopy-bed-oklch: oklch(0.797 0.042 252.9);
}

.element {
  color: var(--canopy-bed);
  background-color: hsl(213 37% 76%);
  border-color: oklch(0.797 0.042 252.9);
}

Tailwind CSS v4

@theme {
  --color-canopy-bed: #aabfd8;
  --color-canopy-bed-50: #edf6ff;
  --color-canopy-bed-100: #dfe9f6;
  --color-canopy-bed-200: #c8d6e7;
  --color-canopy-bed-300: #a9b9cd;
  --color-canopy-bed-400: #8da0b7;
  --color-canopy-bed-500: #7388a2;
  --color-canopy-bed-600: #617389;
  --color-canopy-bed-700: #4d5c6e;
  --color-canopy-bed-800: #384451;
  --color-canopy-bed-900: #262f38;
  --color-canopy-bed-950: #141b23;
}

SCSS

$canopy-bed: #aabfd8;
$canopy-bed-rgb: 170, 191, 216;
$canopy-bed-light: mix(#fff, $canopy-bed, 20%);
$canopy-bed-dark: mix(#000, $canopy-bed, 20%);

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