Western Wear

CSS

:root {
  --western-wear: #cdbb8d;
  --western-wear-rgb: 205 187 141;
  --western-wear-oklch: oklch(0.796 0.065 89.2);
}

.element {
  color: var(--western-wear);
  background-color: hsl(43 39% 68%);
  border-color: oklch(0.796 0.065 89.2);
}

Tailwind CSS v4

@theme {
  --color-western-wear: #cdbb8d;
  --color-western-wear-50: #fcf5e1;
  --color-western-wear-100: #f0e8d0;
  --color-western-wear-200: #ded4b6;
  --color-western-wear-300: #c4b792;
  --color-western-wear-400: #ae9d72;
  --color-western-wear-500: #978453;
  --color-western-wear-600: #807047;
  --color-western-wear-700: #665a38;
  --color-western-wear-800: #4c4128;
  --color-western-wear-900: #352d1b;
  --color-western-wear-950: #201a0b;
}

SCSS

$western-wear: #cdbb8d;
$western-wear-rgb: 205, 187, 141;
$western-wear-light: mix(#fff, $western-wear, 20%);
$western-wear-dark: mix(#000, $western-wear, 20%);

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