Autumn’s Hill

CSS

:root {
  --autumn-s-hill: #ba7a61;
  --autumn-s-hill-rgb: 186 122 97;
  --autumn-s-hill-oklch: oklch(0.64 0.088 42.1);
}

.element {
  color: var(--autumn-s-hill);
  background-color: hsl(17 39% 55%);
  border-color: oklch(0.64 0.088 42.1);
}

Tailwind CSS v4

@theme {
  --color-autumn-s-hill: #ba7a61;
  --color-autumn-s-hill-50: #ffeee1;
  --color-autumn-s-hill-100: #ffdfd0;
  --color-autumn-s-hill-200: #f6c9b6;
  --color-autumn-s-hill-300: #dfa993;
  --color-autumn-s-hill-400: #cc8d75;
  --color-autumn-s-hill-500: #b77256;
  --color-autumn-s-hill-600: #9b614a;
  --color-autumn-s-hill-700: #7c4d3b;
  --color-autumn-s-hill-800: #5c372a;
  --color-autumn-s-hill-900: #41261d;
  --color-autumn-s-hill-950: #29140d;
}

SCSS

$autumn-s-hill: #ba7a61;
$autumn-s-hill-rgb: 186, 122, 97;
$autumn-s-hill-light: mix(#fff, $autumn-s-hill, 20%);
$autumn-s-hill-dark: mix(#000, $autumn-s-hill, 20%);

.element {
  color: $autumn-s-hill;
  box-shadow: 0 0 0 2px rgba($autumn-s-hill, 0.35);
}