Hurricane

CSS

:root {
  --hurricane: #8b7e77;
  --hurricane-rgb: 139 126 119;
  --hurricane-oklch: oklch(0.603 0.019 50.3);
}

.element {
  color: var(--hurricane);
  background-color: hsl(21 8% 51%);
  border-color: oklch(0.603 0.019 50.3);
}

Tailwind CSS v4

@theme {
  --color-hurricane: #8b7e77;
  --color-hurricane-50: #faf4f0;
  --color-hurricane-100: #ede6e2;
  --color-hurricane-200: #dbd2cd;
  --color-hurricane-300: #c0b5af;
  --color-hurricane-400: #a89b95;
  --color-hurricane-500: #91837b;
  --color-hurricane-600: #7b6f68;
  --color-hurricane-700: #625953;
  --color-hurricane-800: #48413d;
  --color-hurricane-900: #322c2a;
  --color-hurricane-950: #1e1a17;
}

SCSS

$hurricane: #8b7e77;
$hurricane-rgb: 139, 126, 119;
$hurricane-light: mix(#fff, $hurricane, 20%);
$hurricane-dark: mix(#000, $hurricane, 20%);

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