Banana Leaf

CSS

:root {
  --banana-leaf: #9d8f3a;
  --banana-leaf-rgb: 157 143 58;
  --banana-leaf-oklch: oklch(0.645 0.107 100);
}

.element {
  color: var(--banana-leaf);
  background-color: hsl(52 46% 42%);
  border-color: oklch(0.645 0.107 100);
}

Tailwind CSS v4

@theme {
  --color-banana-leaf: #9d8f3a;
  --color-banana-leaf-50: #fbf7d4;
  --color-banana-leaf-100: #eeeac1;
  --color-banana-leaf-200: #ddd7a2;
  --color-banana-leaf-300: #c2ba79;
  --color-banana-leaf-400: #ada051;
  --color-banana-leaf-500: #978722;
  --color-banana-leaf-600: #807220;
  --color-banana-leaf-700: #665c19;
  --color-banana-leaf-800: #4c420f;
  --color-banana-leaf-900: #352e09;
  --color-banana-leaf-950: #201a00;
}

SCSS

$banana-leaf: #9d8f3a;
$banana-leaf-rgb: 157, 143, 58;
$banana-leaf-light: mix(#fff, $banana-leaf, 20%);
$banana-leaf-dark: mix(#000, $banana-leaf, 20%);

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