Chocolate Chip

CSS

:root {
  --chocolate-chip: #6e5f52;
  --chocolate-chip-rgb: 110 95 82;
  --chocolate-chip-oklch: oklch(0.496 0.028 63);
}

.element {
  color: var(--chocolate-chip);
  background-color: hsl(28 15% 38%);
  border-color: oklch(0.496 0.028 63);
}

Tailwind CSS v4

@theme {
  --color-chocolate-chip: #6e5f52;
  --color-chocolate-chip-50: #fbf4ed;
  --color-chocolate-chip-100: #efe6de;
  --color-chocolate-chip-200: #ddd2c8;
  --color-chocolate-chip-300: #c2b5a9;
  --color-chocolate-chip-400: #ab9b8e;
  --color-chocolate-chip-500: #948373;
  --color-chocolate-chip-600: #7d6f62;
  --color-chocolate-chip-700: #64584e;
  --color-chocolate-chip-800: #4a4039;
  --color-chocolate-chip-900: #332c27;
  --color-chocolate-chip-950: #1f1915;
}

SCSS

$chocolate-chip: #6e5f52;
$chocolate-chip-rgb: 110, 95, 82;
$chocolate-chip-light: mix(#fff, $chocolate-chip, 20%);
$chocolate-chip-dark: mix(#000, $chocolate-chip, 20%);

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