Worn Wooden

CSS

:root {
  --worn-wooden: #634333;
  --worn-wooden-rgb: 99 67 51;
  --worn-wooden-oklch: oklch(0.415 0.051 47.4);
}

.element {
  color: var(--worn-wooden);
  background-color: hsl(20 32% 29%);
  border-color: oklch(0.415 0.051 47.4);
}

Tailwind CSS v4

@theme {
  --color-worn-wooden: #634333;
  --color-worn-wooden-50: #fff1e8;
  --color-worn-wooden-100: #f7e3d9;
  --color-worn-wooden-200: #e7cec1;
  --color-worn-wooden-300: #ceb0a1;
  --color-worn-wooden-400: #b99685;
  --color-worn-wooden-500: #a37c69;
  --color-worn-wooden-600: #8a6959;
  --color-worn-wooden-700: #6f5447;
  --color-worn-wooden-800: #523d34;
  --color-worn-wooden-900: #392a23;
  --color-worn-wooden-950: #231712;
}

SCSS

$worn-wooden: #634333;
$worn-wooden-rgb: 99, 67, 51;
$worn-wooden-light: mix(#fff, $worn-wooden, 20%);
$worn-wooden-dark: mix(#000, $worn-wooden, 20%);

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