Wind Blown

CSS

:root {
  --wind-blown: #dde3e7;
  --wind-blown-rgb: 221 227 231;
  --wind-blown-oklch: oklch(0.912 0.008 236.6);
}

.element {
  color: var(--wind-blown);
  background-color: hsl(204 17% 89%);
  border-color: oklch(0.912 0.008 236.6);
}

Tailwind CSS v4

@theme {
  --color-wind-blown: #dde3e7;
  --color-wind-blown-50: #f3f5f7;
  --color-wind-blown-100: #e5e8ea;
  --color-wind-blown-200: #d1d5d7;
  --color-wind-blown-300: #b4b8bb;
  --color-wind-blown-400: #9a9fa3;
  --color-wind-blown-500: #81878b;
  --color-wind-blown-600: #6d7276;
  --color-wind-blown-700: #575b5e;
  --color-wind-blown-800: #404345;
  --color-wind-blown-900: #2c2e30;
  --color-wind-blown-950: #191b1c;
}

SCSS

$wind-blown: #dde3e7;
$wind-blown-rgb: 221, 227, 231;
$wind-blown-light: mix(#fff, $wind-blown, 20%);
$wind-blown-dark: mix(#000, $wind-blown, 20%);

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