Bamboo Leaf

CSS

:root {
  --bamboo-leaf: #99b243;
  --bamboo-leaf-rgb: 153 178 67;
  --bamboo-leaf-oklch: oklch(0.722 0.14 120.8);
}

.element {
  color: var(--bamboo-leaf);
  background-color: hsl(74 45% 48%);
  border-color: oklch(0.722 0.14 120.8);
}

Tailwind CSS v4

@theme {
  --color-bamboo-leaf: #99b243;
  --color-bamboo-leaf-50: #edfcd0;
  --color-bamboo-leaf-100: #dff0bd;
  --color-bamboo-leaf-200: #c9df9c;
  --color-bamboo-leaf-300: #aac371;
  --color-bamboo-leaf-400: #93aa43;
  --color-bamboo-leaf-500: #7a9300;
  --color-bamboo-leaf-600: #677c00;
  --color-bamboo-leaf-700: #526302;
  --color-bamboo-leaf-800: #3e4800;
  --color-bamboo-leaf-900: #2a3201;
  --color-bamboo-leaf-950: #181e00;
}

SCSS

$bamboo-leaf: #99b243;
$bamboo-leaf-rgb: 153, 178, 67;
$bamboo-leaf-light: mix(#fff, $bamboo-leaf, 20%);
$bamboo-leaf-dark: mix(#000, $bamboo-leaf, 20%);

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