Potters Clay
See how #8C5738 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Potters Clay Base */
--color-primary: #8C5738;
--color-primary-rgb: 140 87 56;
--color-primary-hsl: 22 43% 38%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f8f1ed;
--color-primary-100: #e9d4c8;
--color-primary-200: #dbb8a4;
--color-primary-300: #cc9c7f;
--color-primary-400: #be7f5b;
--color-primary-500: #a46641;
--color-primary-600: #804f33;
--color-primary-700: #5b3824;
--color-primary-800: #372216;
--color-primary-900: #120b07;
}