Afternoon Tea

CSS

:root {
  --afternoon-tea: #594e40;
  --afternoon-tea-rgb: 89 78 64;
  --afternoon-tea-oklch: oklch(0.431 0.027 73.7);
}

.element {
  color: var(--afternoon-tea);
  background-color: hsl(34 16% 30%);
  border-color: oklch(0.431 0.027 73.7);
}

Tailwind CSS v4

@theme {
  --color-afternoon-tea: #594e40;
  --color-afternoon-tea-50: #faf4ed;
  --color-afternoon-tea-100: #ede7de;
  --color-afternoon-tea-200: #dbd3c8;
  --color-afternoon-tea-300: #bfb6a9;
  --color-afternoon-tea-400: #a89c8e;
  --color-afternoon-tea-500: #918473;
  --color-afternoon-tea-600: #7b7062;
  --color-afternoon-tea-700: #62594e;
  --color-afternoon-tea-800: #484138;
  --color-afternoon-tea-900: #322d27;
  --color-afternoon-tea-950: #1e1a15;
}

SCSS

$afternoon-tea: #594e40;
$afternoon-tea-rgb: 89, 78, 64;
$afternoon-tea-light: mix(#fff, $afternoon-tea, 20%);
$afternoon-tea-dark: mix(#000, $afternoon-tea, 20%);

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