Rolling Prairie

CSS

:root {
  --rolling-prairie: #a29367;
  --rolling-prairie-rgb: 162 147 103;
  --rolling-prairie-oklch: oklch(0.666 0.063 91.4);
}

.element {
  color: var(--rolling-prairie);
  background-color: hsl(45 24% 52%);
  border-color: oklch(0.666 0.063 91.4);
}

Tailwind CSS v4

@theme {
  --color-rolling-prairie: #a29367;
  --color-rolling-prairie-50: #fbf5e1;
  --color-rolling-prairie-100: #efe8d1;
  --color-rolling-prairie-200: #ddd4b6;
  --color-rolling-prairie-300: #c2b793;
  --color-rolling-prairie-400: #ac9e74;
  --color-rolling-prairie-500: #958555;
  --color-rolling-prairie-600: #7e7148;
  --color-rolling-prairie-700: #655a39;
  --color-rolling-prairie-800: #4b4129;
  --color-rolling-prairie-900: #342d1b;
  --color-rolling-prairie-950: #1f1a0c;
}

SCSS

$rolling-prairie: #a29367;
$rolling-prairie-rgb: 162, 147, 103;
$rolling-prairie-light: mix(#fff, $rolling-prairie, 20%);
$rolling-prairie-dark: mix(#000, $rolling-prairie, 20%);

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