Tiny Fawn

CSS

:root {
  --tiny-fawn: #c08b6d;
  --tiny-fawn-rgb: 192 139 109;
  --tiny-fawn-oklch: oklch(0.681 0.078 50.5);
}

.element {
  color: var(--tiny-fawn);
  background-color: hsl(22 40% 59%);
  border-color: oklch(0.681 0.078 50.5);
}

Tailwind CSS v4

@theme {
  --color-tiny-fawn: #c08b6d;
  --color-tiny-fawn-50: #fff0e1;
  --color-tiny-fawn-100: #fee1d1;
  --color-tiny-fawn-200: #f0ccb6;
  --color-tiny-fawn-300: #d8ad93;
  --color-tiny-fawn-400: #c49175;
  --color-tiny-fawn-500: #b07756;
  --color-tiny-fawn-600: #94654a;
  --color-tiny-fawn-700: #77513a;
  --color-tiny-fawn-800: #583a2a;
  --color-tiny-fawn-900: #3e281c;
  --color-tiny-fawn-950: #27160d;
}

SCSS

$tiny-fawn: #c08b6d;
$tiny-fawn-rgb: 192, 139, 109;
$tiny-fawn-light: mix(#fff, $tiny-fawn, 20%);
$tiny-fawn-dark: mix(#000, $tiny-fawn, 20%);

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