Burning Sand

CSS

:root {
  --burning-sand: #d08363;
  --burning-sand-rgb: 208 131 99;
  --burning-sand-oklch: oklch(0.683 0.106 43.2);
}

.element {
  color: var(--burning-sand);
  background-color: hsl(18 54% 60%);
  border-color: oklch(0.683 0.106 43.2);
}

Tailwind CSS v4

@theme {
  --color-burning-sand: #d08363;
  --color-burning-sand-50: #ffeddd;
  --color-burning-sand-100: #ffdecb;
  --color-burning-sand-200: #fcc7af;
  --color-burning-sand-300: #e6a78a;
  --color-burning-sand-400: #d3896b;
  --color-burning-sand-500: #c06d4a;
  --color-burning-sand-600: #a25d3f;
  --color-burning-sand-700: #824a32;
  --color-burning-sand-800: #613524;
  --color-burning-sand-900: #442418;
  --color-burning-sand-950: #2c1309;
}

SCSS

$burning-sand: #d08363;
$burning-sand-rgb: 208, 131, 99;
$burning-sand-light: mix(#fff, $burning-sand, 20%);
$burning-sand-dark: mix(#000, $burning-sand, 20%);

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