#7C6768

CSS

:root {
  --reading-tea-leaves: #7c6768;
  --reading-tea-leaves-rgb: 124 103 104;
  --reading-tea-leaves-oklch: oklch(0.534 0.027 14.8);
}

.element {
  color: var(--reading-tea-leaves);
  background-color: hsl(357 9% 45%);
  border-color: oklch(0.534 0.027 14.8);
}

Tailwind CSS v4

@theme {
  --color-reading-tea-leaves: #7c6768;
  --color-reading-tea-leaves-50: #fdf2f2;
  --color-reading-tea-leaves-100: #f1e4e5;
  --color-reading-tea-leaves-200: #e0d0d0;
  --color-reading-tea-leaves-300: #c5b2b2;
  --color-reading-tea-leaves-400: #ae9899;
  --color-reading-tea-leaves-500: #977f80;
  --color-reading-tea-leaves-600: #806c6d;
  --color-reading-tea-leaves-700: #665657;
  --color-reading-tea-leaves-800: #4b3f40;
  --color-reading-tea-leaves-900: #342b2c;
  --color-reading-tea-leaves-950: #201819;
}

SCSS

$reading-tea-leaves: #7c6768;
$reading-tea-leaves-rgb: 124, 103, 104;
$reading-tea-leaves-light: mix(#fff, $reading-tea-leaves, 20%);
$reading-tea-leaves-dark: mix(#000, $reading-tea-leaves, 20%);

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