Mad for Mango

CSS

:root {
  --mad-for-mango: #f8a200;
  --mad-for-mango-rgb: 248 162 0;
  --mad-for-mango-oklch: oklch(0.779 0.167 71.6);
}

.element {
  color: var(--mad-for-mango);
  background-color: hsl(39 100% 49%);
  border-color: oklch(0.779 0.167 71.6);
}

Tailwind CSS v4

@theme {
  --color-mad-for-mango: #f8a200;
  --color-mad-for-mango-50: #ffefc1;
  --color-mad-for-mango-100: #ffe0aa;
  --color-mad-for-mango-200: #ffc981;
  --color-mad-for-mango-300: #eaa94a;
  --color-mad-for-mango-400: #da8a00;
  --color-mad-for-mango-500: #c86c00;
  --color-mad-for-mango-600: #a95c00;
  --color-mad-for-mango-700: #874a00;
  --color-mad-for-mango-800: #663400;
  --color-mad-for-mango-900: #482400;
  --color-mad-for-mango-950: #2f1200;
}

SCSS

$mad-for-mango: #f8a200;
$mad-for-mango-rgb: 248, 162, 0;
$mad-for-mango-light: mix(#fff, $mad-for-mango, 20%);
$mad-for-mango-dark: mix(#000, $mad-for-mango, 20%);

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