Heavy Hammock

CSS

:root {
  --heavy-hammock: #beb9a2;
  --heavy-hammock-rgb: 190 185 162;
  --heavy-hammock-oklch: oklch(0.784 0.032 97);
}

.element {
  color: var(--heavy-hammock);
  background-color: hsl(49 18% 69%);
  border-color: oklch(0.784 0.032 97);
}

Tailwind CSS v4

@theme {
  --color-heavy-hammock: #beb9a2;
  --color-heavy-hammock-50: #f7f5eb;
  --color-heavy-hammock-100: #eae8dc;
  --color-heavy-hammock-200: #d7d5c5;
  --color-heavy-hammock-300: #bbb8a6;
  --color-heavy-hammock-400: #a39f8a;
  --color-heavy-hammock-500: #8c876f;
  --color-heavy-hammock-600: #76725e;
  --color-heavy-hammock-700: #5f5b4b;
  --color-heavy-hammock-800: #464236;
  --color-heavy-hammock-900: #302e25;
  --color-heavy-hammock-950: #1c1b13;
}

SCSS

$heavy-hammock: #beb9a2;
$heavy-hammock-rgb: 190, 185, 162;
$heavy-hammock-light: mix(#fff, $heavy-hammock, 20%);
$heavy-hammock-dark: mix(#000, $heavy-hammock, 20%);

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