Piney Wood

CSS

:root {
  --piney-wood: #70574f;
  --piney-wood-rgb: 112 87 79;
  --piney-wood-oklch: oklch(0.48 0.036 38.5);
}

.element {
  color: var(--piney-wood);
  background-color: hsl(15 17% 37%);
  border-color: oklch(0.48 0.036 38.5);
}

Tailwind CSS v4

@theme {
  --color-piney-wood: #70574f;
  --color-piney-wood-50: #fff2ed;
  --color-piney-wood-100: #f3e4df;
  --color-piney-wood-200: #e3d0c9;
  --color-piney-wood-300: #c8b2aa;
  --color-piney-wood-400: #b2988f;
  --color-piney-wood-500: #9c7f75;
  --color-piney-wood-600: #846b63;
  --color-piney-wood-700: #6a564f;
  --color-piney-wood-800: #4e3e3a;
  --color-piney-wood-900: #362b28;
  --color-piney-wood-950: #211816;
}

SCSS

$piney-wood: #70574f;
$piney-wood-rgb: 112, 87, 79;
$piney-wood-light: mix(#fff, $piney-wood, 20%);
$piney-wood-dark: mix(#000, $piney-wood, 20%);

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