Scrofulous Brown

CSS

:root {
  --scrofulous-brown: #dba539;
  --scrofulous-brown-rgb: 219 165 57;
  --scrofulous-brown-oklch: oklch(0.754 0.136 80.9);
}

.element {
  color: var(--scrofulous-brown);
  background-color: hsl(40 69% 54%);
  border-color: oklch(0.754 0.136 80.9);
}

Tailwind CSS v4

@theme {
  --color-scrofulous-brown: #dba539;
  --color-scrofulous-brown-50: #fff2ca;
  --color-scrofulous-brown-100: #fee5b5;
  --color-scrofulous-brown-200: #f1d091;
  --color-scrofulous-brown-300: #d9b162;
  --color-scrofulous-brown-400: #c7952e;
  --color-scrofulous-brown-500: #b37a00;
  --color-scrofulous-brown-600: #976700;
  --color-scrofulous-brown-700: #7a5300;
  --color-scrofulous-brown-800: #5b3b00;
  --color-scrofulous-brown-900: #402900;
  --color-scrofulous-brown-950: #291600;
}

SCSS

$scrofulous-brown: #dba539;
$scrofulous-brown-rgb: 219, 165, 57;
$scrofulous-brown-light: mix(#fff, $scrofulous-brown, 20%);
$scrofulous-brown-dark: mix(#000, $scrofulous-brown, 20%);

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