Cape Palliser
See how #A26645 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Cape Palliser Base */
--color-primary: #A26645;
--color-primary-rgb: 162 102 69;
--color-primary-hsl: 21 40% 45%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f7f1ed;
--color-primary-100: #e8d4c9;
--color-primary-200: #d9b8a6;
--color-primary-300: #c99b82;
--color-primary-400: #ba7e5e;
--color-primary-500: #a16545;
--color-primary-600: #7d4f36;
--color-primary-700: #593826;
--color-primary-800: #362217;
--color-primary-900: #120b08;
}