Misty Hillside

CSS

:root {
  --misty-hillside: #dce5cc;
  --misty-hillside-rgb: 220 229 204;
  --misty-hillside-oklch: oklch(0.908 0.035 123.2);
}

.element {
  color: var(--misty-hillside);
  background-color: hsl(82 32% 85%);
  border-color: oklch(0.908 0.035 123.2);
}

Tailwind CSS v4

@theme {
  --color-misty-hillside: #dce5cc;
  --color-misty-hillside-50: #f3f7ec;
  --color-misty-hillside-100: #e5eade;
  --color-misty-hillside-200: #d1d7c7;
  --color-misty-hillside-300: #b3bba8;
  --color-misty-hillside-400: #9aa28c;
  --color-misty-hillside-500: #818a71;
  --color-misty-hillside-600: #6e7560;
  --color-misty-hillside-700: #585e4d;
  --color-misty-hillside-800: #404437;
  --color-misty-hillside-900: #2c2f26;
  --color-misty-hillside-950: #191c14;
}

SCSS

$misty-hillside: #dce5cc;
$misty-hillside-rgb: 220, 229, 204;
$misty-hillside-light: mix(#fff, $misty-hillside, 20%);
$misty-hillside-dark: mix(#000, $misty-hillside, 20%);

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