Red Chipotle

CSS

:root {
  --red-chipotle: #834c3e;
  --red-chipotle-rgb: 131 76 62;
  --red-chipotle-oklch: oklch(0.478 0.078 35.1);
}

.element {
  color: var(--red-chipotle);
  background-color: hsl(12 36% 38%);
  border-color: oklch(0.478 0.078 35.1);
}

Tailwind CSS v4

@theme {
  --color-red-chipotle: #834c3e;
  --color-red-chipotle-50: #ffeee6;
  --color-red-chipotle-100: #ffe0d6;
  --color-red-chipotle-200: #f3c9bd;
  --color-red-chipotle-300: #dcaa9b;
  --color-red-chipotle-400: #c88e7f;
  --color-red-chipotle-500: #b47362;
  --color-red-chipotle-600: #986254;
  --color-red-chipotle-700: #7a4e43;
  --color-red-chipotle-800: #5a3831;
  --color-red-chipotle-900: #3f2621;
  --color-red-chipotle-950: #281510;
}

SCSS

$red-chipotle: #834c3e;
$red-chipotle-rgb: 131, 76, 62;
$red-chipotle-light: mix(#fff, $red-chipotle, 20%);
$red-chipotle-dark: mix(#000, $red-chipotle, 20%);

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