Winter Blizzard

CSS

:root {
  --winter-blizzard: #b8c8d3;
  --winter-blizzard-rgb: 184 200 211;
  --winter-blizzard-oklch: oklch(0.824 0.023 237.7);
}

.element {
  color: var(--winter-blizzard);
  background-color: hsl(204 23% 77%);
  border-color: oklch(0.824 0.023 237.7);
}

Tailwind CSS v4

@theme {
  --color-winter-blizzard: #b8c8d3;
  --color-winter-blizzard-50: #eff6fb;
  --color-winter-blizzard-100: #e1e9ef;
  --color-winter-blizzard-200: #ccd6dd;
  --color-winter-blizzard-300: #adb9c2;
  --color-winter-blizzard-400: #92a1ab;
  --color-winter-blizzard-500: #788994;
  --color-winter-blizzard-600: #66747d;
  --color-winter-blizzard-700: #515d64;
  --color-winter-blizzard-800: #3b4449;
  --color-winter-blizzard-900: #282f33;
  --color-winter-blizzard-950: #161b1f;
}

SCSS

$winter-blizzard: #b8c8d3;
$winter-blizzard-rgb: 184, 200, 211;
$winter-blizzard-light: mix(#fff, $winter-blizzard, 20%);
$winter-blizzard-dark: mix(#000, $winter-blizzard, 20%);

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