Misty Valley

CSS

:root {
  --misty-valley: #bdc389;
  --misty-valley-rgb: 189 195 137;
  --misty-valley-oklch: oklch(0.798 0.077 113);
}

.element {
  color: var(--misty-valley);
  background-color: hsl(66 33% 65%);
  border-color: oklch(0.798 0.077 113);
}

Tailwind CSS v4

@theme {
  --color-misty-valley: #bdc389;
  --color-misty-valley-50: #f4f8df;
  --color-misty-valley-100: #e7ebce;
  --color-misty-valley-200: #d3d9b3;
  --color-misty-valley-300: #b6bd8f;
  --color-misty-valley-400: #9ea46e;
  --color-misty-valley-500: #868c4d;
  --color-misty-valley-600: #727642;
  --color-misty-valley-700: #5b5f35;
  --color-misty-valley-800: #434524;
  --color-misty-valley-900: #2f3018;
  --color-misty-valley-950: #1b1c09;
}

SCSS

$misty-valley: #bdc389;
$misty-valley-rgb: 189, 195, 137;
$misty-valley-light: mix(#fff, $misty-valley, 20%);
$misty-valley-dark: mix(#000, $misty-valley, 20%);

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