Saddle
See how #4C3024 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Saddle Base */
--color-primary: #4C3024;
--color-primary-rgb: 76 48 36;
--color-primary-hsl: 18 36% 22%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f7f0ee;
--color-primary-100: #e7d3cb;
--color-primary-200: #d6b6a8;
--color-primary-300: #c69986;
--color-primary-400: #b67c63;
--color-primary-500: #9c6249;
--color-primary-600: #794c39;
--color-primary-700: #573729;
--color-primary-800: #342118;
--color-primary-900: #110b08;
}