Tilled Earth

CSS

:root {
  --tilled-earth: #80624e;
  --tilled-earth-rgb: 128 98 78;
  --tilled-earth-oklch: oklch(0.521 0.049 55.1);
}

.element {
  color: var(--tilled-earth);
  background-color: hsl(24 24% 40%);
  border-color: oklch(0.521 0.049 55.1);
}

Tailwind CSS v4

@theme {
  --color-tilled-earth: #80624e;
  --color-tilled-earth-50: #fff2e8;
  --color-tilled-earth-100: #f5e4d8;
  --color-tilled-earth-200: #e5cfc0;
  --color-tilled-earth-300: #ccb29f;
  --color-tilled-earth-400: #b69783;
  --color-tilled-earth-500: #a07e67;
  --color-tilled-earth-600: #886b57;
  --color-tilled-earth-700: #6d5546;
  --color-tilled-earth-800: #503e32;
  --color-tilled-earth-900: #382b22;
  --color-tilled-earth-950: #221811;
}

SCSS

$tilled-earth: #80624e;
$tilled-earth-rgb: 128, 98, 78;
$tilled-earth-light: mix(#fff, $tilled-earth, 20%);
$tilled-earth-dark: mix(#000, $tilled-earth, 20%);

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