Brown Hare

CSS

:root {
  --brown-hare: #d3b793;
  --brown-hare-rgb: 211 183 147;
  --brown-hare-oklch: oklch(0.795 0.058 73.8);
}

.element {
  color: var(--brown-hare);
  background-color: hsl(34 42% 70%);
  border-color: oklch(0.795 0.058 73.8);
}

Tailwind CSS v4

@theme {
  --color-brown-hare: #d3b793;
  --color-brown-hare-50: #fff3e3;
  --color-brown-hare-100: #f3e6d3;
  --color-brown-hare-200: #e3d1b9;
  --color-brown-hare-300: #c9b497;
  --color-brown-hare-400: #b49a78;
  --color-brown-hare-500: #9e815a;
  --color-brown-hare-600: #856d4d;
  --color-brown-hare-700: #6b573d;
  --color-brown-hare-800: #4f3f2c;
  --color-brown-hare-900: #372c1e;
  --color-brown-hare-950: #22190e;
}

SCSS

$brown-hare: #d3b793;
$brown-hare-rgb: 211, 183, 147;
$brown-hare-light: mix(#fff, $brown-hare, 20%);
$brown-hare-dark: mix(#000, $brown-hare, 20%);

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