Unripe Banana

CSS

:root {
  --unripe-banana: #f0ff57;
  --unripe-banana-rgb: 240 255 87;
  --unripe-banana-oklch: oklch(0.959 0.185 114.3);
}

.element {
  color: var(--unripe-banana);
  background-color: hsl(65 100% 67%);
  border-color: oklch(0.959 0.185 114.3);
}

Tailwind CSS v4

@theme {
  --color-unripe-banana: #f0ff57;
  --color-unripe-banana-50: #f2fdc0;
  --color-unripe-banana-100: #e4f0a9;
  --color-unripe-banana-200: #d0de80;
  --color-unripe-banana-300: #b2c346;
  --color-unripe-banana-400: #9ea900;
  --color-unripe-banana-500: #879000;
  --color-unripe-banana-600: #727a00;
  --color-unripe-banana-700: #5b6200;
  --color-unripe-banana-800: #454700;
  --color-unripe-banana-900: #303100;
  --color-unripe-banana-950: #1c1d00;
}

SCSS

$unripe-banana: #f0ff57;
$unripe-banana-rgb: 240, 255, 87;
$unripe-banana-light: mix(#fff, $unripe-banana, 20%);
$unripe-banana-dark: mix(#000, $unripe-banana, 20%);

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