Ripe Mango

CSS

:root {
  --ripe-mango: #ffc324;
  --ripe-mango-rgb: 255 195 36;
  --ripe-mango-oklch: oklch(0.849 0.167 84.9);
}

.element {
  color: var(--ripe-mango);
  background-color: hsl(44 100% 57%);
  border-color: oklch(0.849 0.167 84.9);
}

Tailwind CSS v4

@theme {
  --color-ripe-mango: #ffc324;
  --color-ripe-mango-50: #fff3bf;
  --color-ripe-mango-100: #ffe5a8;
  --color-ripe-mango-200: #f3d07e;
  --color-ripe-mango-300: #dcb144;
  --color-ripe-mango-400: #cb9400;
  --color-ripe-mango-500: #b87800;
  --color-ripe-mango-600: #9b6600;
  --color-ripe-mango-700: #7d5200;
  --color-ripe-mango-800: #5e3a00;
  --color-ripe-mango-900: #422800;
  --color-ripe-mango-950: #2a1600;
}

SCSS

$ripe-mango: #ffc324;
$ripe-mango-rgb: 255, 195, 36;
$ripe-mango-light: mix(#fff, $ripe-mango, 20%);
$ripe-mango-dark: mix(#000, $ripe-mango, 20%);

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