Macadamia Brown

CSS

:root {
  --macadamia-brown: #bba791;
  --macadamia-brown-rgb: 187 167 145;
  --macadamia-brown-oklch: oklch(0.74 0.039 69.8);
}

.element {
  color: var(--macadamia-brown);
  background-color: hsl(31 24% 65%);
  border-color: oklch(0.74 0.039 69.8);
}

Tailwind CSS v4

@theme {
  --color-macadamia-brown: #bba791;
  --color-macadamia-brown-50: #fcf4e9;
  --color-macadamia-brown-100: #f0e6da;
  --color-macadamia-brown-200: #dfd2c3;
  --color-macadamia-brown-300: #c4b5a2;
  --color-macadamia-brown-400: #ae9b86;
  --color-macadamia-brown-500: #97826b;
  --color-macadamia-brown-600: #806e5b;
  --color-macadamia-brown-700: #665848;
  --color-macadamia-brown-800: #4c4034;
  --color-macadamia-brown-900: #342c24;
  --color-macadamia-brown-950: #201912;
}

SCSS

$macadamia-brown: #bba791;
$macadamia-brown-rgb: 187, 167, 145;
$macadamia-brown-light: mix(#fff, $macadamia-brown, 20%);
$macadamia-brown-dark: mix(#000, $macadamia-brown, 20%);

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