Afternoon Coffee

CSS

:root {
  --afternoon-coffee: #6e544b;
  --afternoon-coffee-rgb: 110 84 75;
  --afternoon-coffee-oklch: oklch(0.47 0.038 39.9);
}

.element {
  color: var(--afternoon-coffee);
  background-color: hsl(15 19% 36%);
  border-color: oklch(0.47 0.038 39.9);
}

Tailwind CSS v4

@theme {
  --color-afternoon-coffee: #6e544b;
  --color-afternoon-coffee-50: #fff2ed;
  --color-afternoon-coffee-100: #f4e4de;
  --color-afternoon-coffee-200: #e3cfc8;
  --color-afternoon-coffee-300: #c9b2a9;
  --color-afternoon-coffee-400: #b3978e;
  --color-afternoon-coffee-500: #9d7e74;
  --color-afternoon-coffee-600: #856b62;
  --color-afternoon-coffee-700: #6a554e;
  --color-afternoon-coffee-800: #4e3e39;
  --color-afternoon-coffee-900: #372b27;
  --color-afternoon-coffee-950: #211815;
}

SCSS

$afternoon-coffee: #6e544b;
$afternoon-coffee-rgb: 110, 84, 75;
$afternoon-coffee-light: mix(#fff, $afternoon-coffee, 20%);
$afternoon-coffee-dark: mix(#000, $afternoon-coffee, 20%);

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