Chinese Bronze

CSS

:root {
  --chinese-bronze: #cd8032;
  --chinese-bronze-rgb: 205 128 50;
  --chinese-bronze-oklch: oklch(0.668 0.131 62);
}

.element {
  color: var(--chinese-bronze);
  background-color: hsl(30 61% 50%);
  border-color: oklch(0.668 0.131 62);
}

Tailwind CSS v4

@theme {
  --color-chinese-bronze: #cd8032;
  --color-chinese-bronze-50: #ffeecf;
  --color-chinese-bronze-100: #ffdfbb;
  --color-chinese-bronze-200: #fcc999;
  --color-chinese-bronze-300: #e7a96e;
  --color-chinese-bronze-400: #d58b44;
  --color-chinese-bronze-500: #c26e00;
  --color-chinese-bronze-600: #a45e06;
  --color-chinese-bronze-700: #844b07;
  --color-chinese-bronze-800: #623505;
  --color-chinese-bronze-900: #452504;
  --color-chinese-bronze-950: #2d1300;
}

SCSS

$chinese-bronze: #cd8032;
$chinese-bronze-rgb: 205, 128, 50;
$chinese-bronze-light: mix(#fff, $chinese-bronze, 20%);
$chinese-bronze-dark: mix(#000, $chinese-bronze, 20%);

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