Peanut Brittle

CSS

:root {
  --peanut-brittle: #a6893a;
  --peanut-brittle-rgb: 166 137 58;
  --peanut-brittle-oklch: oklch(0.641 0.104 88.9);
}

.element {
  color: var(--peanut-brittle);
  background-color: hsl(44 48% 44%);
  border-color: oklch(0.641 0.104 88.9);
}

Tailwind CSS v4

@theme {
  --color-peanut-brittle: #a6893a;
  --color-peanut-brittle-50: #fff5d4;
  --color-peanut-brittle-100: #f5e7c1;
  --color-peanut-brittle-200: #e5d3a2;
  --color-peanut-brittle-300: #cbb679;
  --color-peanut-brittle-400: #b79b52;
  --color-peanut-brittle-500: #a28224;
  --color-peanut-brittle-600: #896e21;
  --color-peanut-brittle-700: #6e581a;
  --color-peanut-brittle-800: #524011;
  --color-peanut-brittle-900: #392c0a;
  --color-peanut-brittle-950: #231901;
}

SCSS

$peanut-brittle: #a6893a;
$peanut-brittle-rgb: 166, 137, 58;
$peanut-brittle-light: mix(#fff, $peanut-brittle, 20%);
$peanut-brittle-dark: mix(#000, $peanut-brittle, 20%);

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