Banana Palm

CSS

:root {
  --banana-palm: #95a263;
  --banana-palm-rgb: 149 162 99;
  --banana-palm-oklch: oklch(0.687 0.087 118.3);
}

.element {
  color: var(--banana-palm);
  background-color: hsl(72 25% 51%);
  border-color: oklch(0.687 0.087 118.3);
}

Tailwind CSS v4

@theme {
  --color-banana-palm: #95a263;
  --color-banana-palm-50: #f1f9de;
  --color-banana-palm-100: #e4edcd;
  --color-banana-palm-200: #cfdab1;
  --color-banana-palm-300: #b1bf8c;
  --color-banana-palm-400: #99a66a;
  --color-banana-palm-500: #818e48;
  --color-banana-palm-600: #6d783e;
  --color-banana-palm-700: #576031;
  --color-banana-palm-800: #414622;
  --color-banana-palm-900: #2d3116;
  --color-banana-palm-950: #1a1d07;
}

SCSS

$banana-palm: #95a263;
$banana-palm-rgb: 149, 162, 99;
$banana-palm-light: mix(#fff, $banana-palm, 20%);
$banana-palm-dark: mix(#000, $banana-palm, 20%);

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