Weathered Bamboo

CSS

:root {
  --weathered-bamboo: #593a27;
  --weathered-bamboo-rgb: 89 58 39;
  --weathered-bamboo-oklch: oklch(0.38 0.053 52);
}

.element {
  color: var(--weathered-bamboo);
  background-color: hsl(23 39% 25%);
  border-color: oklch(0.38 0.053 52);
}

Tailwind CSS v4

@theme {
  --color-weathered-bamboo: #593a27;
  --color-weathered-bamboo-50: #fff1e7;
  --color-weathered-bamboo-100: #f7e4d8;
  --color-weathered-bamboo-200: #e7cfbf;
  --color-weathered-bamboo-300: #ceb19e;
  --color-weathered-bamboo-400: #b99682;
  --color-weathered-bamboo-500: #a37d66;
  --color-weathered-bamboo-600: #8a6a56;
  --color-weathered-bamboo-700: #6f5445;
  --color-weathered-bamboo-800: #523d32;
  --color-weathered-bamboo-900: #392a22;
  --color-weathered-bamboo-950: #231811;
}

SCSS

$weathered-bamboo: #593a27;
$weathered-bamboo-rgb: 89, 58, 39;
$weathered-bamboo-light: mix(#fff, $weathered-bamboo, 20%);
$weathered-bamboo-dark: mix(#000, $weathered-bamboo, 20%);

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