Banana Mash

CSS

:root {
  --banana-mash: #fafe4b;
  --banana-mash-rgb: 250 254 75;
  --banana-mash-oklch: oklch(0.964 0.189 110.8);
}

.element {
  color: var(--banana-mash);
  background-color: hsl(61 99% 65%);
  border-color: oklch(0.964 0.189 110.8);
}

Tailwind CSS v4

@theme {
  --color-banana-mash: #fafe4b;
  --color-banana-mash-50: #f5fcbd;
  --color-banana-mash-100: #e8efa5;
  --color-banana-mash-200: #d5dd7a;
  --color-banana-mash-300: #b9c13c;
  --color-banana-mash-400: #a5a700;
  --color-banana-mash-500: #8f8e00;
  --color-banana-mash-600: #797800;
  --color-banana-mash-700: #616000;
  --color-banana-mash-800: #494500;
  --color-banana-mash-900: #333000;
  --color-banana-mash-950: #1f1c00;
}

SCSS

$banana-mash: #fafe4b;
$banana-mash-rgb: 250, 254, 75;
$banana-mash-light: mix(#fff, $banana-mash, 20%);
$banana-mash-dark: mix(#000, $banana-mash, 20%);

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