Mango Salsa

CSS

:root {
  --mango-salsa: #ffb066;
  --mango-salsa-rgb: 255 176 102;
  --mango-salsa-oklch: oklch(0.819 0.129 62.5);
}

.element {
  color: var(--mango-salsa);
  background-color: hsl(29 100% 70%);
  border-color: oklch(0.819 0.129 62.5);
}

Tailwind CSS v4

@theme {
  --color-mango-salsa: #ffb066;
  --color-mango-salsa-50: #ffeecf;
  --color-mango-salsa-100: #ffe0bb;
  --color-mango-salsa-200: #fcc99a;
  --color-mango-salsa-300: #e6a96f;
  --color-mango-salsa-400: #d48c46;
  --color-mango-salsa-500: #c16f00;
  --color-mango-salsa-600: #a35e0a;
  --color-mango-salsa-700: #834b09;
  --color-mango-salsa-800: #623607;
  --color-mango-salsa-900: #452505;
  --color-mango-salsa-950: #2c1300;
}

SCSS

$mango-salsa: #ffb066;
$mango-salsa-rgb: 255, 176, 102;
$mango-salsa-light: mix(#fff, $mango-salsa, 20%);
$mango-salsa-dark: mix(#000, $mango-salsa, 20%);

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