Hip Waders

CSS

:root {
  --hip-waders: #746a51;
  --hip-waders-rgb: 116 106 81;
  --hip-waders-oklch: oklch(0.527 0.039 88.8);
}

.element {
  color: var(--hip-waders);
  background-color: hsl(43 18% 39%);
  border-color: oklch(0.527 0.039 88.8);
}

Tailwind CSS v4

@theme {
  --color-hip-waders: #746a51;
  --color-hip-waders-50: #f9f5e9;
  --color-hip-waders-100: #ede8da;
  --color-hip-waders-200: #dad4c2;
  --color-hip-waders-300: #bfb7a1;
  --color-hip-waders-400: #a89e85;
  --color-hip-waders-500: #918569;
  --color-hip-waders-600: #7a7159;
  --color-hip-waders-700: #625a47;
  --color-hip-waders-800: #484233;
  --color-hip-waders-900: #322d23;
  --color-hip-waders-950: #1e1a12;
}

SCSS

$hip-waders: #746a51;
$hip-waders-rgb: 116, 106, 81;
$hip-waders-light: mix(#fff, $hip-waders, 20%);
$hip-waders-dark: mix(#000, $hip-waders, 20%);

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