Banana Cream

CSS

:root {
  --banana-cream: #fff49c;
  --banana-cream-rgb: 255 244 156;
  --banana-cream-oklch: oklch(0.957 0.109 102.1);
}

.element {
  color: var(--banana-cream);
  background-color: hsl(53 100% 81%);
  border-color: oklch(0.957 0.109 102.1);
}

Tailwind CSS v4

@theme {
  --color-banana-cream: #fff49c;
  --color-banana-cream-50: #faf7d4;
  --color-banana-cream-100: #edeac1;
  --color-banana-cream-200: #dbd7a1;
  --color-banana-cream-300: #c0bb78;
  --color-banana-cream-400: #aba14f;
  --color-banana-cream-500: #95881e;
  --color-banana-cream-600: #7e731d;
  --color-banana-cream-700: #655c17;
  --color-banana-cream-800: #4b430d;
  --color-banana-cream-900: #342e08;
  --color-banana-cream-950: #201b00;
}

SCSS

$banana-cream: #fff49c;
$banana-cream-rgb: 255, 244, 156;
$banana-cream-light: mix(#fff, $banana-cream, 20%);
$banana-cream-dark: mix(#000, $banana-cream, 20%);

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