String Deep

CSS

:root {
  --string-deep: #7f7860;
  --string-deep-rgb: 127 120 96;
  --string-deep-oklch: oklch(0.572 0.036 93.7);
}

.element {
  color: var(--string-deep);
  background-color: hsl(46 14% 44%);
  border-color: oklch(0.572 0.036 93.7);
}

Tailwind CSS v4

@theme {
  --color-string-deep: #7f7860;
  --color-string-deep-50: #f8f5ea;
  --color-string-deep-100: #ebe8db;
  --color-string-deep-200: #d9d4c3;
  --color-string-deep-300: #bdb8a3;
  --color-string-deep-400: #a59e87;
  --color-string-deep-500: #8e866b;
  --color-string-deep-600: #78725b;
  --color-string-deep-700: #605b49;
  --color-string-deep-800: #474234;
  --color-string-deep-900: #312e24;
  --color-string-deep-950: #1d1a12;
}

SCSS

$string-deep: #7f7860;
$string-deep-rgb: 127, 120, 96;
$string-deep-light: mix(#fff, $string-deep, 20%);
$string-deep-dark: mix(#000, $string-deep, 20%);

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