Mango Margarita

CSS

:root {
  --mango-margarita: #f7b74e;
  --mango-margarita-rgb: 247 183 78;
  --mango-margarita-oklch: oklch(0.82 0.14 76.7);
}

.element {
  color: var(--mango-margarita);
  background-color: hsl(37 91% 64%);
  border-color: oklch(0.82 0.14 76.7);
}

Tailwind CSS v4

@theme {
  --color-mango-margarita: #f7b74e;
  --color-mango-margarita-50: #fff1c9;
  --color-mango-margarita-100: #ffe3b3;
  --color-mango-margarita-200: #f5ce8f;
  --color-mango-margarita-300: #deaf5f;
  --color-mango-margarita-400: #cd922a;
  --color-mango-margarita-500: #b97600;
  --color-mango-margarita-600: #9c6400;
  --color-mango-margarita-700: #7d5000;
  --color-mango-margarita-800: #5e3900;
  --color-mango-margarita-900: #422700;
  --color-mango-margarita-950: #2a1500;
}

SCSS

$mango-margarita: #f7b74e;
$mango-margarita-rgb: 247, 183, 78;
$mango-margarita-light: mix(#fff, $mango-margarita, 20%);
$mango-margarita-dark: mix(#000, $mango-margarita, 20%);

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