Iron Oxide

CSS

:root {
  --iron-oxide: #835949;
  --iron-oxide-rgb: 131 89 73;
  --iron-oxide-oklch: oklch(0.505 0.061 41.7);
}

.element {
  color: var(--iron-oxide);
  background-color: hsl(17 28% 40%);
  border-color: oklch(0.505 0.061 41.7);
}

Tailwind CSS v4

@theme {
  --color-iron-oxide: #835949;
  --color-iron-oxide-50: #fff0e7;
  --color-iron-oxide-100: #fbe2d8;
  --color-iron-oxide-200: #eccdc0;
  --color-iron-oxide-300: #d3ae9f;
  --color-iron-oxide-400: #bf9382;
  --color-iron-oxide-500: #aa7966;
  --color-iron-oxide-600: #8f6657;
  --color-iron-oxide-700: #735245;
  --color-iron-oxide-800: #553b32;
  --color-iron-oxide-900: #3b2922;
  --color-iron-oxide-950: #251611;
}

SCSS

$iron-oxide: #835949;
$iron-oxide-rgb: 131, 89, 73;
$iron-oxide-light: mix(#fff, $iron-oxide, 20%);
$iron-oxide-dark: mix(#000, $iron-oxide, 20%);

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