Tawny Amber

CSS

:root {
  --tawny-amber: #d19776;
  --tawny-amber-rgb: 209 151 118;
  --tawny-amber-oklch: oklch(0.725 0.084 50.6);
}

.element {
  color: var(--tawny-amber);
  background-color: hsl(22 50% 64%);
  border-color: oklch(0.725 0.084 50.6);
}

Tailwind CSS v4

@theme {
  --color-tawny-amber: #d19776;
  --color-tawny-amber-50: #ffefe0;
  --color-tawny-amber-100: #ffe1cf;
  --color-tawny-amber-200: #f2cbb4;
  --color-tawny-amber-300: #dbac90;
  --color-tawny-amber-400: #c79071;
  --color-tawny-amber-500: #b37552;
  --color-tawny-amber-600: #976446;
  --color-tawny-amber-700: #795037;
  --color-tawny-amber-800: #5a3928;
  --color-tawny-amber-900: #3f271b;
  --color-tawny-amber-950: #28150b;
}

SCSS

$tawny-amber: #d19776;
$tawny-amber-rgb: 209, 151, 118;
$tawny-amber-light: mix(#fff, $tawny-amber, 20%);
$tawny-amber-dark: mix(#000, $tawny-amber, 20%);

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