The Cottage

CSS

:root {
  --the-cottage: #837663;
  --the-cottage-rgb: 131 118 99;
  --the-cottage-oklch: oklch(0.572 0.032 77.3);
}

.element {
  color: var(--the-cottage);
  background-color: hsl(36 14% 45%);
  border-color: oklch(0.572 0.032 77.3);
}

Tailwind CSS v4

@theme {
  --color-the-cottage: #837663;
  --color-the-cottage-50: #faf4eb;
  --color-the-cottage-100: #eee7dc;
  --color-the-cottage-200: #dcd3c5;
  --color-the-cottage-300: #c0b6a5;
  --color-the-cottage-400: #a99c8a;
  --color-the-cottage-500: #92846e;
  --color-the-cottage-600: #7c705e;
  --color-the-cottage-700: #63594b;
  --color-the-cottage-800: #494136;
  --color-the-cottage-900: #332d25;
  --color-the-cottage-950: #1e1a14;
}

SCSS

$the-cottage: #837663;
$the-cottage-rgb: 131, 118, 99;
$the-cottage-light: mix(#fff, $the-cottage, 20%);
$the-cottage-dark: mix(#000, $the-cottage, 20%);

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