Chill in the Air

CSS

:root {
  --chill-in-the-air: #d1d5e7;
  --chill-in-the-air-rgb: 209 213 231;
  --chill-in-the-air-oklch: oklch(0.875 0.025 275.9);
}

.element {
  color: var(--chill-in-the-air);
  background-color: hsl(229 31% 86%);
  border-color: oklch(0.875 0.025 275.9);
}

Tailwind CSS v4

@theme {
  --color-chill-in-the-air: #d1d5e7;
  --color-chill-in-the-air-50: #f3f5fc;
  --color-chill-in-the-air-100: #e6e7f0;
  --color-chill-in-the-air-200: #d1d3df;
  --color-chill-in-the-air-300: #b4b6c5;
  --color-chill-in-the-air-400: #9a9eae;
  --color-chill-in-the-air-500: #818597;
  --color-chill-in-the-air-600: #6d7180;
  --color-chill-in-the-air-700: #575a66;
  --color-chill-in-the-air-800: #3f424b;
  --color-chill-in-the-air-900: #2c2d34;
  --color-chill-in-the-air-950: #191a20;
}

SCSS

$chill-in-the-air: #d1d5e7;
$chill-in-the-air-rgb: 209, 213, 231;
$chill-in-the-air-light: mix(#fff, $chill-in-the-air, 20%);
$chill-in-the-air-dark: mix(#000, $chill-in-the-air, 20%);

.element {
  color: $chill-in-the-air;
  box-shadow: 0 0 0 2px rgba($chill-in-the-air, 0.35);
}