Throw Rug

CSS

:root {
  --throw-rug: #ada274;
  --throw-rug-rgb: 173 162 116;
  --throw-rug-oklch: oklch(0.71 0.064 96.3);
}

.element {
  color: var(--throw-rug);
  background-color: hsl(48 26% 57%);
  border-color: oklch(0.71 0.064 96.3);
}

Tailwind CSS v4

@theme {
  --color-throw-rug: #ada274;
  --color-throw-rug-50: #faf6e1;
  --color-throw-rug-100: #ede9d1;
  --color-throw-rug-200: #dbd5b6;
  --color-throw-rug-300: #c0b893;
  --color-throw-rug-400: #a99f73;
  --color-throw-rug-500: #928654;
  --color-throw-rug-600: #7c7248;
  --color-throw-rug-700: #635b39;
  --color-throw-rug-800: #494228;
  --color-throw-rug-900: #332e1b;
  --color-throw-rug-950: #1f1a0b;
}

SCSS

$throw-rug: #ada274;
$throw-rug-rgb: 173, 162, 116;
$throw-rug-light: mix(#fff, $throw-rug, 20%);
$throw-rug-dark: mix(#000, $throw-rug, 20%);

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