Spanish Peanut

CSS

:root {
  --spanish-peanut: #c57556;
  --spanish-peanut-rgb: 197 117 86;
  --spanish-peanut-oklch: oklch(0.643 0.11 41.7);
}

.element {
  color: var(--spanish-peanut);
  background-color: hsl(17 49% 55%);
  border-color: oklch(0.643 0.11 41.7);
}

Tailwind CSS v4

@theme {
  --color-spanish-peanut: #c57556;
  --color-spanish-peanut-50: #ffecdc;
  --color-spanish-peanut-100: #ffddcb;
  --color-spanish-peanut-200: #fec6af;
  --color-spanish-peanut-300: #e8a589;
  --color-spanish-peanut-400: #d6886a;
  --color-spanish-peanut-500: #c26b49;
  --color-spanish-peanut-600: #a45b3e;
  --color-spanish-peanut-700: #844931;
  --color-spanish-peanut-800: #623424;
  --color-spanish-peanut-900: #452318;
  --color-spanish-peanut-950: #2c1209;
}

SCSS

$spanish-peanut: #c57556;
$spanish-peanut-rgb: 197, 117, 86;
$spanish-peanut-light: mix(#fff, $spanish-peanut, 20%);
$spanish-peanut-dark: mix(#000, $spanish-peanut, 20%);

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