Wet Leaf

CSS

:root {
  --wet-leaf: #b9a023;
  --wet-leaf-rgb: 185 160 35;
  --wet-leaf-oklch: oklch(0.708 0.136 96.9);
}

.element {
  color: var(--wet-leaf);
  background-color: hsl(50 68% 43%);
  border-color: oklch(0.708 0.136 96.9);
}

Tailwind CSS v4

@theme {
  --color-wet-leaf: #b9a023;
  --color-wet-leaf-50: #fff7ca;
  --color-wet-leaf-100: #f3e9b5;
  --color-wet-leaf-200: #e3d691;
  --color-wet-leaf-300: #c9b962;
  --color-wet-leaf-400: #b59e2d;
  --color-wet-leaf-500: #a08400;
  --color-wet-leaf-600: #877000;
  --color-wet-leaf-700: #6c5a00;
  --color-wet-leaf-800: #514100;
  --color-wet-leaf-900: #392d00;
  --color-wet-leaf-950: #231900;
}

SCSS

$wet-leaf: #b9a023;
$wet-leaf-rgb: 185, 160, 35;
$wet-leaf-light: mix(#fff, $wet-leaf, 20%);
$wet-leaf-dark: mix(#000, $wet-leaf, 20%);

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