Banana Peel

CSS

:root {
  --banana-peel: #ffe774;
  --banana-peel-rgb: 255 231 116;
  --banana-peel-oklch: oklch(0.925 0.137 97.7);
}

.element {
  color: var(--banana-peel);
  background-color: hsl(50 100% 73%);
  border-color: oklch(0.925 0.137 97.7);
}

Tailwind CSS v4

@theme {
  --color-banana-peel: #ffe774;
  --color-banana-peel-50: #fef7ca;
  --color-banana-peel-100: #f2eab5;
  --color-banana-peel-200: #e2d691;
  --color-banana-peel-300: #c8b962;
  --color-banana-peel-400: #b59e2b;
  --color-banana-peel-500: #9f8500;
  --color-banana-peel-600: #877100;
  --color-banana-peel-700: #6c5a00;
  --color-banana-peel-800: #514100;
  --color-banana-peel-900: #382d00;
  --color-banana-peel-950: #231a00;
}

SCSS

$banana-peel: #ffe774;
$banana-peel-rgb: 255, 231, 116;
$banana-peel-light: mix(#fff, $banana-peel, 20%);
$banana-peel-dark: mix(#000, $banana-peel, 20%);

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