Mango Nectar

CSS

:root {
  --mango-nectar: #ffd49d;
  --mango-nectar-rgb: 255 212 157;
  --mango-nectar-oklch: oklch(0.894 0.085 73.2);
}

.element {
  color: var(--mango-nectar);
  background-color: hsl(34 100% 81%);
  border-color: oklch(0.894 0.085 73.2);
}

Tailwind CSS v4

@theme {
  --color-mango-nectar: #ffd49d;
  --color-mango-nectar-50: #fff2db;
  --color-mango-nectar-100: #f9e5c9;
  --color-mango-nectar-200: #ead0ac;
  --color-mango-nectar-300: #d1b286;
  --color-mango-nectar-400: #bd9765;
  --color-mango-nectar-500: #a87d41;
  --color-mango-nectar-600: #8e6a38;
  --color-mango-nectar-700: #72552d;
  --color-mango-nectar-800: #553d1f;
  --color-mango-nectar-900: #3b2a14;
  --color-mango-nectar-950: #251706;
}

SCSS

$mango-nectar: #ffd49d;
$mango-nectar-rgb: 255, 212, 157;
$mango-nectar-light: mix(#fff, $mango-nectar, 20%);
$mango-nectar-dark: mix(#000, $mango-nectar, 20%);

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