Mango Squash

CSS

:root {
  --mango-squash: #8e6c39;
  --mango-squash-rgb: 142 108 57;
  --mango-squash-oklch: oklch(0.554 0.081 75.9);
}

.element {
  color: var(--mango-squash);
  background-color: hsl(36 43% 39%);
  border-color: oklch(0.554 0.081 75.9);
}

Tailwind CSS v4

@theme {
  --color-mango-squash: #8e6c39;
  --color-mango-squash-50: #fff3dc;
  --color-mango-squash-100: #f7e5ca;
  --color-mango-squash-200: #e8d1ae;
  --color-mango-squash-300: #cfb389;
  --color-mango-squash-400: #ba9867;
  --color-mango-squash-500: #a57f45;
  --color-mango-squash-600: #8b6b3b;
  --color-mango-squash-700: #70562f;
  --color-mango-squash-800: #533e21;
  --color-mango-squash-900: #3a2b16;
  --color-mango-squash-950: #241807;
}

SCSS

$mango-squash: #8e6c39;
$mango-squash-rgb: 142, 108, 57;
$mango-squash-light: mix(#fff, $mango-squash, 20%);
$mango-squash-dark: mix(#000, $mango-squash, 20%);

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