Green Banana

CSS

:root {
  --green-banana: #a8b453;
  --green-banana-rgb: 168 180 83;
  --green-banana-oklch: oklch(0.74 0.123 115.3);
}

.element {
  color: var(--green-banana);
  background-color: hsl(67 39% 52%);
  border-color: oklch(0.74 0.123 115.3);
}

Tailwind CSS v4

@theme {
  --color-green-banana: #a8b453;
  --color-green-banana-50: #f2fad3;
  --color-green-banana-100: #e4eec0;
  --color-green-banana-200: #d0dca0;
  --color-green-banana-300: #b2c076;
  --color-green-banana-400: #9ca74c;
  --color-green-banana-500: #848f14;
  --color-green-banana-600: #6f7916;
  --color-green-banana-700: #596112;
  --color-green-banana-800: #434608;
  --color-green-banana-900: #2e3106;
  --color-green-banana-950: #1b1d00;
}

SCSS

$green-banana: #a8b453;
$green-banana-rgb: 168, 180, 83;
$green-banana-light: mix(#fff, $green-banana, 20%);
$green-banana-dark: mix(#000, $green-banana, 20%);

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