Heavy Siena

CSS

:root {
  --heavy-siena: #735848;
  --heavy-siena-rgb: 115 88 72;
  --heavy-siena-oklch: oklch(0.484 0.044 52);
}

.element {
  color: var(--heavy-siena);
  background-color: hsl(22 23% 37%);
  border-color: oklch(0.484 0.044 52);
}

Tailwind CSS v4

@theme {
  --color-heavy-siena: #735848;
  --color-heavy-siena-50: #fff2ea;
  --color-heavy-siena-100: #f4e4db;
  --color-heavy-siena-200: #e4d0c3;
  --color-heavy-siena-300: #cab2a3;
  --color-heavy-siena-400: #b49887;
  --color-heavy-siena-500: #9e7f6c;
  --color-heavy-siena-600: #866b5c;
  --color-heavy-siena-700: #6b5649;
  --color-heavy-siena-800: #4f3e35;
  --color-heavy-siena-900: #372b24;
  --color-heavy-siena-950: #221813;
}

SCSS

$heavy-siena: #735848;
$heavy-siena-rgb: 115, 88, 72;
$heavy-siena-light: mix(#fff, $heavy-siena, 20%);
$heavy-siena-dark: mix(#000, $heavy-siena, 20%);

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