Bamboo Brown

CSS

:root {
  --bamboo-brown: #c87f00;
  --bamboo-brown-rgb: 200 127 0;
  --bamboo-brown-oklch: oklch(0.658 0.143 69.8);
}

.element {
  color: var(--bamboo-brown);
  background-color: hsl(38 100% 39%);
  border-color: oklch(0.658 0.143 69.8);
}

Tailwind CSS v4

@theme {
  --color-bamboo-brown: #c87f00;
  --color-bamboo-brown-50: #ffefc9;
  --color-bamboo-brown-100: #ffe1b4;
  --color-bamboo-brown-200: #fbcb90;
  --color-bamboo-brown-300: #e5ab61;
  --color-bamboo-brown-400: #d48d2d;
  --color-bamboo-brown-500: #c07100;
  --color-bamboo-brown-600: #a36000;
  --color-bamboo-brown-700: #834d00;
  --color-bamboo-brown-800: #623700;
  --color-bamboo-brown-900: #452500;
  --color-bamboo-brown-950: #2c1300;
}

SCSS

$bamboo-brown: #c87f00;
$bamboo-brown-rgb: 200, 127, 0;
$bamboo-brown-light: mix(#fff, $bamboo-brown, 20%);
$bamboo-brown-dark: mix(#000, $bamboo-brown, 20%);

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