Misty Morning Dew

CSS

:root {
  --misty-morning-dew: #bac1cc;
  --misty-morning-dew-rgb: 186 193 204;
  --misty-morning-dew-oklch: oklch(0.809 0.017 259.4);
}

.element {
  color: var(--misty-morning-dew);
  background-color: hsl(217 15% 76%);
  border-color: oklch(0.809 0.017 259.4);
}

Tailwind CSS v4

@theme {
  --color-misty-morning-dew: #bac1cc;
  --color-misty-morning-dew-50: #f2f5fa;
  --color-misty-morning-dew-100: #e5e8ee;
  --color-misty-morning-dew-200: #d0d4dc;
  --color-misty-morning-dew-300: #b2b8c0;
  --color-misty-morning-dew-400: #989fa9;
  --color-misty-morning-dew-500: #7f8792;
  --color-misty-morning-dew-600: #6c727b;
  --color-misty-morning-dew-700: #565b63;
  --color-misty-morning-dew-800: #3f4348;
  --color-misty-morning-dew-900: #2b2e32;
  --color-misty-morning-dew-950: #181b1e;
}

SCSS

$misty-morning-dew: #bac1cc;
$misty-morning-dew-rgb: 186, 193, 204;
$misty-morning-dew-light: mix(#fff, $misty-morning-dew, 20%);
$misty-morning-dew-dark: mix(#000, $misty-morning-dew, 20%);

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