Morning Fog

CSS

:root {
  --morning-fog: #d0dbd7;
  --morning-fog-rgb: 208 219 215;
  --morning-fog-oklch: oklch(0.882 0.013 172.3);
}

.element {
  color: var(--morning-fog);
  background-color: hsl(158 13% 84%);
  border-color: oklch(0.882 0.013 172.3);
}

Tailwind CSS v4

@theme {
  --color-morning-fog: #d0dbd7;
  --color-morning-fog-50: #f1f6f5;
  --color-morning-fog-100: #e4e9e7;
  --color-morning-fog-200: #cfd6d4;
  --color-morning-fog-300: #b1bab7;
  --color-morning-fog-400: #97a19d;
  --color-morning-fog-500: #7e8985;
  --color-morning-fog-600: #6b7471;
  --color-morning-fog-700: #555d5a;
  --color-morning-fog-800: #3e4442;
  --color-morning-fog-900: #2b2f2d;
  --color-morning-fog-950: #181b1a;
}

SCSS

$morning-fog: #d0dbd7;
$morning-fog-rgb: 208, 219, 215;
$morning-fog-light: mix(#fff, $morning-fog, 20%);
$morning-fog-dark: mix(#000, $morning-fog, 20%);

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