Prairie Sand

CSS

:root {
  --prairie-sand: #883c32;
  --prairie-sand-rgb: 136 60 50;
  --prairie-sand-oklch: oklch(0.455 0.106 29.4);
}

.element {
  color: var(--prairie-sand);
  background-color: hsl(7 46% 36%);
  border-color: oklch(0.455 0.106 29.4);
}

Tailwind CSS v4

@theme {
  --color-prairie-sand: #883c32;
  --color-prairie-sand-50: #ffebe3;
  --color-prairie-sand-100: #ffdcd2;
  --color-prairie-sand-200: #fec4b9;
  --color-prairie-sand-300: #e9a396;
  --color-prairie-sand-400: #d68679;
  --color-prairie-sand-500: #c3695c;
  --color-prairie-sand-600: #a4594e;
  --color-prairie-sand-700: #84473e;
  --color-prairie-sand-800: #62332e;
  --color-prairie-sand-900: #45231f;
  --color-prairie-sand-950: #2c110f;
}

SCSS

$prairie-sand: #883c32;
$prairie-sand-rgb: 136, 60, 50;
$prairie-sand-light: mix(#fff, $prairie-sand, 20%);
$prairie-sand-dark: mix(#000, $prairie-sand, 20%);

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