African Sand

CSS

:root {
  --african-sand: #ccaa88;
  --african-sand-rgb: 204 170 136;
  --african-sand-oklch: oklch(0.76 0.061 66.7);
}

.element {
  color: var(--african-sand);
  background-color: hsl(30 40% 67%);
  border-color: oklch(0.76 0.061 66.7);
}

Tailwind CSS v4

@theme {
  --color-african-sand: #ccaa88;
  --color-african-sand-50: #fff2e3;
  --color-african-sand-100: #f6e5d3;
  --color-african-sand-200: #e6d0b9;
  --color-african-sand-300: #cdb296;
  --color-african-sand-400: #b89878;
  --color-african-sand-500: #a27e5a;
  --color-african-sand-600: #896b4d;
  --color-african-sand-700: #6e563d;
  --color-african-sand-800: #513e2c;
  --color-african-sand-900: #392b1d;
  --color-african-sand-950: #23180d;
}

SCSS

$african-sand: #ccaa88;
$african-sand-rgb: 204, 170, 136;
$african-sand-light: mix(#fff, $african-sand, 20%);
$african-sand-dark: mix(#000, $african-sand, 20%);

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