Red Prairie

CSS

:root {
  --red-prairie: #8e3928;
  --red-prairie-rgb: 142 57 40;
  --red-prairie-oklch: oklch(0.459 0.12 33.1);
}

.element {
  color: var(--red-prairie);
  background-color: hsl(10 56% 36%);
  border-color: oklch(0.459 0.12 33.1);
}

Tailwind CSS v4

@theme {
  --color-red-prairie: #8e3928;
  --color-red-prairie-50: #ffeade;
  --color-red-prairie-100: #ffdbcd;
  --color-red-prairie-200: #ffc3b2;
  --color-red-prairie-300: #eea18e;
  --color-red-prairie-400: #dc8370;
  --color-red-prairie-500: #c96550;
  --color-red-prairie-600: #a95644;
  --color-red-prairie-700: #884536;
  --color-red-prairie-800: #653128;
  --color-red-prairie-900: #47211b;
  --color-red-prairie-950: #2e100b;
}

SCSS

$red-prairie: #8e3928;
$red-prairie-rgb: 142, 57, 40;
$red-prairie-light: mix(#fff, $red-prairie, 20%);
$red-prairie-dark: mix(#000, $red-prairie, 20%);

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