Free Wheeling

CSS

:root {
  --free-wheeling: #b29a8b;
  --free-wheeling-rgb: 178 154 139;
  --free-wheeling-oklch: oklch(0.703 0.036 54);
}

.element {
  color: var(--free-wheeling);
  background-color: hsl(23 20% 62%);
  border-color: oklch(0.703 0.036 54);
}

Tailwind CSS v4

@theme {
  --color-free-wheeling: #b29a8b;
  --color-free-wheeling-50: #fef3ec;
  --color-free-wheeling-100: #f2e5dd;
  --color-free-wheeling-200: #e1d1c6;
  --color-free-wheeling-300: #c6b3a6;
  --color-free-wheeling-400: #b0998b;
  --color-free-wheeling-500: #9a8070;
  --color-free-wheeling-600: #826d5f;
  --color-free-wheeling-700: #68574c;
  --color-free-wheeling-800: #4d3f37;
  --color-free-wheeling-900: #352b26;
  --color-free-wheeling-950: #201914;
}

SCSS

$free-wheeling: #b29a8b;
$free-wheeling-rgb: 178, 154, 139;
$free-wheeling-light: mix(#fff, $free-wheeling, 20%);
$free-wheeling-dark: mix(#000, $free-wheeling, 20%);

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