Shingle Fawn
See how #6B4E31 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Shingle Fawn Base */
--color-primary: #6B4E31;
--color-primary-rgb: 107 78 49;
--color-primary-hsl: 30 37% 31%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f7f2ee;
--color-primary-100: #e7d9cb;
--color-primary-200: #d7bfa8;
--color-primary-300: #c7a685;
--color-primary-400: #b78c62;
--color-primary-500: #9d7348;
--color-primary-600: #7a5938;
--color-primary-700: #574028;
--color-primary-800: #342618;
--color-primary-900: #110d08;
}