Wooden Peg

CSS

:root {
  --wooden-peg: #a89983;
  --wooden-peg-rgb: 168 153 131;
  --wooden-peg-oklch: oklch(0.69 0.036 77.5);
}

.element {
  color: var(--wooden-peg);
  background-color: hsl(36 18% 59%);
  border-color: oklch(0.69 0.036 77.5);
}

Tailwind CSS v4

@theme {
  --color-wooden-peg: #a89983;
  --color-wooden-peg-50: #fbf4ea;
  --color-wooden-peg-100: #eee7db;
  --color-wooden-peg-200: #ddd3c4;
  --color-wooden-peg-300: #c1b6a3;
  --color-wooden-peg-400: #aa9c87;
  --color-wooden-peg-500: #94846c;
  --color-wooden-peg-600: #7d6f5c;
  --color-wooden-peg-700: #645949;
  --color-wooden-peg-800: #4a4135;
  --color-wooden-peg-900: #332d24;
  --color-wooden-peg-950: #1f1a13;
}

SCSS

$wooden-peg: #a89983;
$wooden-peg-rgb: 168, 153, 131;
$wooden-peg-light: mix(#fff, $wooden-peg, 20%);
$wooden-peg-dark: mix(#000, $wooden-peg, 20%);

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