Banana Puree

CSS

:root {
  --banana-puree: #b29705;
  --banana-puree-rgb: 178 151 5;
  --banana-puree-oklch: oklch(0.681 0.139 96.1);
}

.element {
  color: var(--banana-puree);
  background-color: hsl(51 95% 36%);
  border-color: oklch(0.681 0.139 96.1);
}

Tailwind CSS v4

@theme {
  --color-banana-puree: #b29705;
  --color-banana-puree-50: #fff6c9;
  --color-banana-puree-100: #f4e9b4;
  --color-banana-puree-200: #e4d590;
  --color-banana-puree-300: #cab860;
  --color-banana-puree-400: #b79d27;
  --color-banana-puree-500: #a28400;
  --color-banana-puree-600: #897000;
  --color-banana-puree-700: #6e5900;
  --color-banana-puree-800: #524000;
  --color-banana-puree-900: #392c00;
  --color-banana-puree-950: #241900;
}

SCSS

$banana-puree: #b29705;
$banana-puree-rgb: 178, 151, 5;
$banana-puree-light: mix(#fff, $banana-puree, 20%);
$banana-puree-dark: mix(#000, $banana-puree, 20%);

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