Leather Chair

CSS

:root {
  --leather-chair: #a3754c;
  --leather-chair-rgb: 163 117 76;
  --leather-chair-oklch: oklch(0.6 0.081 62);
}

.element {
  color: var(--leather-chair);
  background-color: hsl(28 36% 47%);
  border-color: oklch(0.6 0.081 62);
}

Tailwind CSS v4

@theme {
  --color-leather-chair: #a3754c;
  --color-leather-chair-50: #fff1de;
  --color-leather-chair-100: #fce3cd;
  --color-leather-chair-200: #eeceb1;
  --color-leather-chair-300: #d5af8c;
  --color-leather-chair-400: #c1946c;
  --color-leather-chair-500: #ad7a4c;
  --color-leather-chair-600: #926741;
  --color-leather-chair-700: #755233;
  --color-leather-chair-800: #573c25;
  --color-leather-chair-900: #3d2918;
  --color-leather-chair-950: #261709;
}

SCSS

$leather-chair: #a3754c;
$leather-chair-rgb: 163, 117, 76;
$leather-chair-light: mix(#fff, $leather-chair, 20%);
$leather-chair-dark: mix(#000, $leather-chair, 20%);

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