Polished Bronze

CSS

:root {
  --polished-bronze: #cd7f32;
  --polished-bronze-rgb: 205 127 50;
  --polished-bronze-oklch: oklch(0.666 0.132 61.3);
}

.element {
  color: var(--polished-bronze);
  background-color: hsl(30 61% 50%);
  border-color: oklch(0.666 0.132 61.3);
}

Tailwind CSS v4

@theme {
  --color-polished-bronze: #cd7f32;
  --color-polished-bronze-50: #ffeecf;
  --color-polished-bronze-100: #ffdfbb;
  --color-polished-bronze-200: #fdc99a;
  --color-polished-bronze-300: #e7a96e;
  --color-polished-bronze-400: #d68b45;
  --color-polished-bronze-500: #c36e00;
  --color-polished-bronze-600: #a45d07;
  --color-polished-bronze-700: #844b08;
  --color-polished-bronze-800: #633506;
  --color-polished-bronze-900: #452405;
  --color-polished-bronze-950: #2d1300;
}

SCSS

$polished-bronze: #cd7f32;
$polished-bronze-rgb: 205, 127, 50;
$polished-bronze-light: mix(#fff, $polished-bronze, 20%);
$polished-bronze-dark: mix(#000, $polished-bronze, 20%);

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