Dirt Track

CSS

:root {
  --dirt-track: #bb6644;
  --dirt-track-rgb: 187 102 68;
  --dirt-track-oklch: oklch(0.601 0.119 42);
}

.element {
  color: var(--dirt-track);
  background-color: hsl(17 47% 50%);
  border-color: oklch(0.601 0.119 42);
}

Tailwind CSS v4

@theme {
  --color-dirt-track: #bb6644;
  --color-dirt-track-50: #ffebda;
  --color-dirt-track-100: #ffdcc8;
  --color-dirt-track-200: #ffc5ab;
  --color-dirt-track-300: #eba485;
  --color-dirt-track-400: #d98665;
  --color-dirt-track-500: #c66842;
  --color-dirt-track-600: #a85939;
  --color-dirt-track-700: #87472d;
  --color-dirt-track-800: #643221;
  --color-dirt-track-900: #472215;
  --color-dirt-track-950: #2e1107;
}

SCSS

$dirt-track: #bb6644;
$dirt-track-rgb: 187, 102, 68;
$dirt-track-light: mix(#fff, $dirt-track, 20%);
$dirt-track-dark: mix(#000, $dirt-track, 20%);

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