Cedar Wood

CSS

:root {
  --cedar-wood: #a97367;
  --cedar-wood-rgb: 169 115 103;
  --cedar-wood-oklch: oklch(0.608 0.071 33);
}

.element {
  color: var(--cedar-wood);
  background-color: hsl(11 28% 53%);
  border-color: oklch(0.608 0.071 33);
}

Tailwind CSS v4

@theme {
  --color-cedar-wood: #a97367;
  --color-cedar-wood-50: #ffefe8;
  --color-cedar-wood-100: #ffe0d8;
  --color-cedar-wood-200: #f1cac0;
  --color-cedar-wood-300: #d9ab9f;
  --color-cedar-wood-400: #c58f83;
  --color-cedar-wood-500: #b07567;
  --color-cedar-wood-600: #956358;
  --color-cedar-wood-700: #774f46;
  --color-cedar-wood-800: #593933;
  --color-cedar-wood-900: #3e2723;
  --color-cedar-wood-950: #271512;
}

SCSS

$cedar-wood: #a97367;
$cedar-wood-rgb: 169, 115, 103;
$cedar-wood-light: mix(#fff, $cedar-wood, 20%);
$cedar-wood-dark: mix(#000, $cedar-wood, 20%);

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