Crude Banana

CSS

:root {
  --crude-banana: #21c40e;
  --crude-banana-rgb: 33 196 14;
  --crude-banana-oklch: oklch(0.714 0.236 142);
}

.element {
  color: var(--crude-banana);
  background-color: hsl(114 87% 41%);
  border-color: oklch(0.714 0.236 142);
}

Tailwind CSS v4

@theme {
  --color-crude-banana: #21c40e;
  --color-crude-banana-50: #ccffcb;
  --color-crude-banana-100: #b7fdb6;
  --color-crude-banana-200: #92ee92;
  --color-crude-banana-300: #5fd562;
  --color-crude-banana-400: #2bbe1d;
  --color-crude-banana-500: #00a800;
  --color-crude-banana-600: #008e00;
  --color-crude-banana-700: #007200;
  --color-crude-banana-800: #005300;
  --color-crude-banana-900: #003a00;
  --color-crude-banana-950: #002400;
}

SCSS

$crude-banana: #21c40e;
$crude-banana-rgb: 33, 196, 14;
$crude-banana-light: mix(#fff, $crude-banana, 20%);
$crude-banana-dark: mix(#000, $crude-banana, 20%);

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