Top Banana

CSS

:root {
  --top-banana: #fad873;
  --top-banana-rgb: 250 216 115;
  --top-banana-oklch: oklch(0.891 0.126 91.1);
}

.element {
  color: var(--top-banana);
  background-color: hsl(45 93% 72%);
  border-color: oklch(0.891 0.126 91.1);
}

Tailwind CSS v4

@theme {
  --color-top-banana: #fad873;
  --color-top-banana-50: #fff5cd;
  --color-top-banana-100: #f6e8b8;
  --color-top-banana-200: #e7d496;
  --color-top-banana-300: #cdb669;
  --color-top-banana-400: #ba9b3a;
  --color-top-banana-500: #a58100;
  --color-top-banana-600: #8c6e00;
  --color-top-banana-700: #705800;
  --color-top-banana-800: #543f00;
  --color-top-banana-900: #3a2c00;
  --color-top-banana-950: #251900;
}

SCSS

$top-banana: #fad873;
$top-banana-rgb: 250, 216, 115;
$top-banana-light: mix(#fff, $top-banana, 20%);
$top-banana-dark: mix(#000, $top-banana, 20%);

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