Head in the Clouds

CSS

:root {
  --head-in-the-clouds: #d1dde1;
  --head-in-the-clouds-rgb: 209 221 225;
  --head-in-the-clouds-oklch: oklch(0.89 0.014 219.6);
}

.element {
  color: var(--head-in-the-clouds);
  background-color: hsl(195 21% 85%);
  border-color: oklch(0.89 0.014 219.6);
}

Tailwind CSS v4

@theme {
  --color-head-in-the-clouds: #d1dde1;
  --color-head-in-the-clouds-50: #f1f6f8;
  --color-head-in-the-clouds-100: #e3e9eb;
  --color-head-in-the-clouds-200: #ced6d8;
  --color-head-in-the-clouds-300: #b0b9bc;
  --color-head-in-the-clouds-400: #96a1a4;
  --color-head-in-the-clouds-500: #7c898d;
  --color-head-in-the-clouds-600: #697477;
  --color-head-in-the-clouds-700: #545c5f;
  --color-head-in-the-clouds-800: #3d4446;
  --color-head-in-the-clouds-900: #2a2f30;
  --color-head-in-the-clouds-950: #181b1c;
}

SCSS

$head-in-the-clouds: #d1dde1;
$head-in-the-clouds-rgb: 209, 221, 225;
$head-in-the-clouds-light: mix(#fff, $head-in-the-clouds, 20%);
$head-in-the-clouds-dark: mix(#000, $head-in-the-clouds, 20%);

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