Sepia Skin
See how #9E5B40 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Sepia Skin Base */
--color-primary: #9E5B40;
--color-primary-rgb: 158 91 64;
--color-primary-hsl: 17 42% 44%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f8f0ed;
--color-primary-100: #e9d2c9;
--color-primary-200: #dab4a4;
--color-primary-300: #cb9680;
--color-primary-400: #bc775c;
--color-primary-500: #a35e43;
--color-primary-600: #7f4934;
--color-primary-700: #5b3425;
--color-primary-800: #361f16;
--color-primary-900: #120a07;
}