Misty Glen

CSS

:root {
  --misty-glen: #cde7db;
  --misty-glen-rgb: 205 231 219;
  --misty-glen-oklch: oklch(0.906 0.032 166.2);
}

.element {
  color: var(--misty-glen);
  background-color: hsl(152 35% 85%);
  border-color: oklch(0.906 0.032 166.2);
}

Tailwind CSS v4

@theme {
  --color-misty-glen: #cde7db;
  --color-misty-glen-50: #edf8f3;
  --color-misty-glen-100: #deebe6;
  --color-misty-glen-200: #c8d9d2;
  --color-misty-glen-300: #a9bdb4;
  --color-misty-glen-400: #8da59a;
  --color-misty-glen-500: #738d81;
  --color-misty-glen-600: #61776e;
  --color-misty-glen-700: #4e6058;
  --color-misty-glen-800: #38463f;
  --color-misty-glen-900: #27302c;
  --color-misty-glen-950: #151d19;
}

SCSS

$misty-glen: #cde7db;
$misty-glen-rgb: 205, 231, 219;
$misty-glen-light: mix(#fff, $misty-glen, 20%);
$misty-glen-dark: mix(#000, $misty-glen, 20%);

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