Blue Haze

CSS

:root {
  --blue-haze: #bdbace;
  --blue-haze-rgb: 189 186 206;
  --blue-haze-oklch: oklch(0.798 0.028 292.6);
}

.element {
  color: var(--blue-haze);
  background-color: hsl(249 17% 77%);
  border-color: oklch(0.798 0.028 292.6);
}

Tailwind CSS v4

@theme {
  --color-blue-haze: #bdbace;
  --color-blue-haze-50: #f5f4fd;
  --color-blue-haze-100: #e8e6f1;
  --color-blue-haze-200: #d5d2df;
  --color-blue-haze-300: #b8b5c5;
  --color-blue-haze-400: #9e9cae;
  --color-blue-haze-500: #868398;
  --color-blue-haze-600: #726f80;
  --color-blue-haze-700: #5b5967;
  --color-blue-haze-800: #42414c;
  --color-blue-haze-900: #2e2d35;
  --color-blue-haze-950: #1a1a20;
}

SCSS

$blue-haze: #bdbace;
$blue-haze-rgb: 189, 186, 206;
$blue-haze-light: mix(#fff, $blue-haze, 20%);
$blue-haze-dark: mix(#000, $blue-haze, 20%);

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