Chocolate Covered

CSS

:root {
  --chocolate-covered: #8b4121;
  --chocolate-covered-rgb: 139 65 33;
  --chocolate-covered-oklch: oklch(0.465 0.11 42.5);
}

.element {
  color: var(--chocolate-covered);
  background-color: hsl(18 62% 34%);
  border-color: oklch(0.465 0.11 42.5);
}

Tailwind CSS v4

@theme {
  --color-chocolate-covered: #8b4121;
  --color-chocolate-covered-50: #ffecdc;
  --color-chocolate-covered-100: #ffddca;
  --color-chocolate-covered-200: #fec6ae;
  --color-chocolate-covered-300: #e8a689;
  --color-chocolate-covered-400: #d58869;
  --color-chocolate-covered-500: #c26b47;
  --color-chocolate-covered-600: #a45b3d;
  --color-chocolate-covered-700: #844931;
  --color-chocolate-covered-800: #623423;
  --color-chocolate-covered-900: #452317;
  --color-chocolate-covered-950: #2c1208;
}

SCSS

$chocolate-covered: #8b4121;
$chocolate-covered-rgb: 139, 65, 33;
$chocolate-covered-light: mix(#fff, $chocolate-covered, 20%);
$chocolate-covered-dark: mix(#000, $chocolate-covered, 20%);

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