Afternoon Nap

CSS

:root {
  --afternoon-nap: #b7b5a4;
  --afternoon-nap-rgb: 183 181 164;
  --afternoon-nap-oklch: oklch(0.77 0.024 101.5);
}

.element {
  color: var(--afternoon-nap);
  background-color: hsl(54 12% 68%);
  border-color: oklch(0.77 0.024 101.5);
}

Tailwind CSS v4

@theme {
  --color-afternoon-nap: #b7b5a4;
  --color-afternoon-nap-50: #f6f6ee;
  --color-afternoon-nap-100: #e9e8df;
  --color-afternoon-nap-200: #d6d5c9;
  --color-afternoon-nap-300: #b9b8aa;
  --color-afternoon-nap-400: #a19f8f;
  --color-afternoon-nap-500: #898775;
  --color-afternoon-nap-600: #747263;
  --color-afternoon-nap-700: #5d5b4f;
  --color-afternoon-nap-800: #444339;
  --color-afternoon-nap-900: #2f2e27;
  --color-afternoon-nap-950: #1c1b15;
}

SCSS

$afternoon-nap: #b7b5a4;
$afternoon-nap-rgb: 183, 181, 164;
$afternoon-nap-light: mix(#fff, $afternoon-nap, 20%);
$afternoon-nap-dark: mix(#000, $afternoon-nap, 20%);

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