Spanish Raisin

CSS

:root {
  --spanish-raisin: #61504e;
  --spanish-raisin-rgb: 97 80 78;
  --spanish-raisin-oklch: oklch(0.448 0.023 25.9);
}

.element {
  color: var(--spanish-raisin);
  background-color: hsl(6 11% 34%);
  border-color: oklch(0.448 0.023 25.9);
}

Tailwind CSS v4

@theme {
  --color-spanish-raisin: #61504e;
  --color-spanish-raisin-50: #fcf3f1;
  --color-spanish-raisin-100: #efe5e4;
  --color-spanish-raisin-200: #ded1cf;
  --color-spanish-raisin-300: #c3b3b1;
  --color-spanish-raisin-400: #ac9a97;
  --color-spanish-raisin-500: #95817e;
  --color-spanish-raisin-600: #7e6d6b;
  --color-spanish-raisin-700: #655755;
  --color-spanish-raisin-800: #4a3f3e;
  --color-spanish-raisin-900: #332c2b;
  --color-spanish-raisin-950: #1f1918;
}

SCSS

$spanish-raisin: #61504e;
$spanish-raisin-rgb: 97, 80, 78;
$spanish-raisin-light: mix(#fff, $spanish-raisin, 20%);
$spanish-raisin-dark: mix(#000, $spanish-raisin, 20%);

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