High Tea

CSS

:root {
  --high-tea: #7f6f57;
  --high-tea-rgb: 127 111 87;
  --high-tea-oklch: oklch(0.55 0.041 77.8);
}

.element {
  color: var(--high-tea);
  background-color: hsl(36 19% 42%);
  border-color: oklch(0.55 0.041 77.8);
}

Tailwind CSS v4

@theme {
  --color-high-tea: #7f6f57;
  --color-high-tea-50: #fbf4e8;
  --color-high-tea-100: #efe7d9;
  --color-high-tea-200: #ded3c1;
  --color-high-tea-300: #c3b6a1;
  --color-high-tea-400: #ac9c84;
  --color-high-tea-500: #958368;
  --color-high-tea-600: #7e6f58;
  --color-high-tea-700: #655946;
  --color-high-tea-800: #4b4133;
  --color-high-tea-900: #342d22;
  --color-high-tea-950: #1f1a12;
}

SCSS

$high-tea: #7f6f57;
$high-tea-rgb: 127, 111, 87;
$high-tea-light: mix(#fff, $high-tea, 20%);
$high-tea-dark: mix(#000, $high-tea, 20%);

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