Tawny Ember

CSS

:root {
  --tawny-ember: #a7947c;
  --tawny-ember-rgb: 167 148 124;
  --tawny-ember-oklch: oklch(0.677 0.041 73.5);
}

.element {
  color: var(--tawny-ember);
  background-color: hsl(33 20% 57%);
  border-color: oklch(0.677 0.041 73.5);
}

Tailwind CSS v4

@theme {
  --color-tawny-ember: #a7947c;
  --color-tawny-ember-50: #fcf4e9;
  --color-tawny-ember-100: #f0e6d9;
  --color-tawny-ember-200: #dfd2c1;
  --color-tawny-ember-300: #c4b5a1;
  --color-tawny-ember-400: #ad9b84;
  --color-tawny-ember-500: #978268;
  --color-tawny-ember-600: #806e59;
  --color-tawny-ember-700: #665847;
  --color-tawny-ember-800: #4b4033;
  --color-tawny-ember-900: #342c23;
  --color-tawny-ember-950: #201912;
}

SCSS

$tawny-ember: #a7947c;
$tawny-ember-rgb: 167, 148, 124;
$tawny-ember-light: mix(#fff, $tawny-ember, 20%);
$tawny-ember-dark: mix(#000, $tawny-ember, 20%);

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