Vaquero Boots

CSS

:root {
  --vaquero-boots: #855f43;
  --vaquero-boots-rgb: 133 95 67;
  --vaquero-boots-oklch: oklch(0.518 0.064 57.1);
}

.element {
  color: var(--vaquero-boots);
  background-color: hsl(25 33% 39%);
  border-color: oklch(0.518 0.064 57.1);
}

Tailwind CSS v4

@theme {
  --color-vaquero-boots: #855f43;
  --color-vaquero-boots-50: #fff1e3;
  --color-vaquero-boots-100: #f9e3d3;
  --color-vaquero-boots-200: #eaceba;
  --color-vaquero-boots-300: #d1b097;
  --color-vaquero-boots-400: #bc9579;
  --color-vaquero-boots-500: #a77b5c;
  --color-vaquero-boots-600: #8d694e;
  --color-vaquero-boots-700: #71543e;
  --color-vaquero-boots-800: #543d2d;
  --color-vaquero-boots-900: #3b2a1e;
  --color-vaquero-boots-950: #25170e;
}

SCSS

$vaquero-boots: #855f43;
$vaquero-boots-rgb: 133, 95, 67;
$vaquero-boots-light: mix(#fff, $vaquero-boots, 20%);
$vaquero-boots-dark: mix(#000, $vaquero-boots, 20%);

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