Copper
See how #B87333 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Copper Base */
--color-primary: #B87333;
--color-primary-rgb: 184 115 51;
--color-primary-hsl: 29 57% 46%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #faf2eb;
--color-primary-100: #efd8c3;
--color-primary-200: #e4be9b;
--color-primary-300: #d9a473;
--color-primary-400: #ce8a4b;
--color-primary-500: #b47131;
--color-primary-600: #8c5826;
--color-primary-700: #643f1b;
--color-primary-800: #3c2610;
--color-primary-900: #140d05;
}