Grain Brown
See how #E4D5B7 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Grain Brown Base */
--color-primary: #E4D5B7;
--color-primary-rgb: 228 213 183;
--color-primary-hsl: 40 45% 81%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #f8f4ed;
--color-primary-100: #eadec8;
--color-primary-200: #dcc9a3;
--color-primary-300: #ceb37e;
--color-primary-400: #c09d59;
--color-primary-500: #a6843f;
--color-primary-600: #816731;
--color-primary-700: #5c4923;
--color-primary-800: #372c15;
--color-primary-900: #120f07;
}