Banana Bandanna

CSS

:root {
  --banana-bandanna: #f8f739;
  --banana-bandanna-rgb: 248 247 57;
  --banana-bandanna-oklch: oklch(0.947 0.192 109.3);
}

.element {
  color: var(--banana-bandanna);
  background-color: hsl(60 93% 60%);
  border-color: oklch(0.947 0.192 109.3);
}

Tailwind CSS v4

@theme {
  --color-banana-bandanna: #f8f739;
  --color-banana-bandanna-50: #f7fbbb;
  --color-banana-bandanna-100: #eaefa3;
  --color-banana-bandanna-200: #d7dc77;
  --color-banana-bandanna-300: #bcc036;
  --color-banana-bandanna-400: #a8a500;
  --color-banana-bandanna-500: #938c00;
  --color-banana-bandanna-600: #7c7700;
  --color-banana-bandanna-700: #635f00;
  --color-banana-bandanna-800: #4b4500;
  --color-banana-bandanna-900: #343000;
  --color-banana-bandanna-950: #201c00;
}

SCSS

$banana-bandanna: #f8f739;
$banana-bandanna-rgb: 248, 247, 57;
$banana-bandanna-light: mix(#fff, $banana-bandanna, 20%);
$banana-bandanna-dark: mix(#000, $banana-bandanna, 20%);

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