Ripe Banana

CSS

:root {
  --ripe-banana: #cf9d41;
  --ripe-banana-rgb: 207 157 65;
  --ripe-banana-oklch: oklch(0.726 0.123 79.7);
}

.element {
  color: var(--ripe-banana);
  background-color: hsl(39 60% 53%);
  border-color: oklch(0.726 0.123 79.7);
}

Tailwind CSS v4

@theme {
  --color-ripe-banana: #cf9d41;
  --color-ripe-banana-50: #fff2ce;
  --color-ripe-banana-100: #fde5ba;
  --color-ripe-banana-200: #efd098;
  --color-ripe-banana-300: #d7b16c;
  --color-ripe-banana-400: #c59540;
  --color-ripe-banana-500: #b07b00;
  --color-ripe-banana-600: #956800;
  --color-ripe-banana-700: #785300;
  --color-ripe-banana-800: #593c00;
  --color-ripe-banana-900: #3f2901;
  --color-ripe-banana-950: #281700;
}

SCSS

$ripe-banana: #cf9d41;
$ripe-banana-rgb: 207, 157, 65;
$ripe-banana-light: mix(#fff, $ripe-banana, 20%);
$ripe-banana-dark: mix(#000, $ripe-banana, 20%);

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