Afternoon Stroll

CSS

:root {
  --afternoon-stroll: #d9c5a1;
  --afternoon-stroll-rgb: 217 197 161;
  --afternoon-stroll-oklch: oklch(0.831 0.053 82.2);
}

.element {
  color: var(--afternoon-stroll);
  background-color: hsl(39 42% 74%);
  border-color: oklch(0.831 0.053 82.2);
}

Tailwind CSS v4

@theme {
  --color-afternoon-stroll: #d9c5a1;
  --color-afternoon-stroll-50: #fcf4e4;
  --color-afternoon-stroll-100: #f0e7d4;
  --color-afternoon-stroll-200: #dfd3bb;
  --color-afternoon-stroll-300: #c4b699;
  --color-afternoon-stroll-400: #ae9c7b;
  --color-afternoon-stroll-500: #98835d;
  --color-afternoon-stroll-600: #806f50;
  --color-afternoon-stroll-700: #67593f;
  --color-afternoon-stroll-800: #4c412d;
  --color-afternoon-stroll-900: #352c1f;
  --color-afternoon-stroll-950: #20190e;
}

SCSS

$afternoon-stroll: #d9c5a1;
$afternoon-stroll-rgb: 217, 197, 161;
$afternoon-stroll-light: mix(#fff, $afternoon-stroll, 20%);
$afternoon-stroll-dark: mix(#000, $afternoon-stroll, 20%);

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