Curds and Whey

CSS

:root {
  --curds-and-whey: #bca483;
  --curds-and-whey-rgb: 188 164 131;
  --curds-and-whey-oklch: oklch(0.731 0.053 75.6);
}

.element {
  color: var(--curds-and-whey);
  background-color: hsl(35 30% 63%);
  border-color: oklch(0.731 0.053 75.6);
}

Tailwind CSS v4

@theme {
  --color-curds-and-whey: #bca483;
  --color-curds-and-whey-50: #fef4e5;
  --color-curds-and-whey-100: #f2e6d5;
  --color-curds-and-whey-200: #e1d2bb;
  --color-curds-and-whey-300: #c7b599;
  --color-curds-and-whey-400: #b19b7c;
  --color-curds-and-whey-500: #9b825e;
  --color-curds-and-whey-600: #836e50;
  --color-curds-and-whey-700: #695840;
  --color-curds-and-whey-800: #4e402e;
  --color-curds-and-whey-900: #362c1f;
  --color-curds-and-whey-950: #21190f;
}

SCSS

$curds-and-whey: #bca483;
$curds-and-whey-rgb: 188, 164, 131;
$curds-and-whey-light: mix(#fff, $curds-and-whey, 20%);
$curds-and-whey-dark: mix(#000, $curds-and-whey, 20%);

.element {
  color: $curds-and-whey;
  box-shadow: 0 0 0 2px rgba($curds-and-whey, 0.35);
}