Cowgirl Boots

CSS

:root {
  --cowgirl-boots: #9e7c60;
  --cowgirl-boots-rgb: 158 124 96;
  --cowgirl-boots-oklch: oklch(0.612 0.058 60.9);
}

.element {
  color: var(--cowgirl-boots);
  background-color: hsl(27 24% 50%);
  border-color: oklch(0.612 0.058 60.9);
}

Tailwind CSS v4

@theme {
  --color-cowgirl-boots: #9e7c60;
  --color-cowgirl-boots-50: #fff2e5;
  --color-cowgirl-boots-100: #f7e4d4;
  --color-cowgirl-boots-200: #e7cfbb;
  --color-cowgirl-boots-300: #ceb199;
  --color-cowgirl-boots-400: #b8977c;
  --color-cowgirl-boots-500: #a37d5e;
  --color-cowgirl-boots-600: #8a6a50;
  --color-cowgirl-boots-700: #6e5540;
  --color-cowgirl-boots-800: #523e2e;
  --color-cowgirl-boots-900: #392a1f;
  --color-cowgirl-boots-950: #23180f;
}

SCSS

$cowgirl-boots: #9e7c60;
$cowgirl-boots-rgb: 158, 124, 96;
$cowgirl-boots-light: mix(#fff, $cowgirl-boots, 20%);
$cowgirl-boots-dark: mix(#000, $cowgirl-boots, 20%);

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