Crushed Clay

CSS

:root {
  --crushed-clay: #ae7f71;
  --crushed-clay-rgb: 174 127 113;
  --crushed-clay-oklch: oklch(0.639 0.062 37.3);
}

.element {
  color: var(--crushed-clay);
  background-color: hsl(14 27% 56%);
  border-color: oklch(0.639 0.062 37.3);
}

Tailwind CSS v4

@theme {
  --color-crushed-clay: #ae7f71;
  --color-crushed-clay-50: #fff0e8;
  --color-crushed-clay-100: #fce1d9;
  --color-crushed-clay-200: #edccc1;
  --color-crushed-clay-300: #d5ada0;
  --color-crushed-clay-400: #c09284;
  --color-crushed-clay-500: #ab7869;
  --color-crushed-clay-600: #906659;
  --color-crushed-clay-700: #745147;
  --color-crushed-clay-800: #563b34;
  --color-crushed-clay-900: #3c2823;
  --color-crushed-clay-950: #261612;
}

SCSS

$crushed-clay: #ae7f71;
$crushed-clay-rgb: 174, 127, 113;
$crushed-clay-light: mix(#fff, $crushed-clay, 20%);
$crushed-clay-dark: mix(#000, $crushed-clay, 20%);

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