Fuzzy Wuzzy Brown
See how #C45655 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Fuzzy Wuzzy Brown Base */
--color-primary: #C45655;
--color-primary-rgb: 196 86 85;
--color-primary-hsl: 1 48% 55%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f8ecec;
--color-primary-100: #ebc7c6;
--color-primary-200: #dea2a1;
--color-primary-300: #d17c7b;
--color-primary-400: #c35755;
--color-primary-500: #aa3e3c;
--color-primary-600: #84302e;
--color-primary-700: #5e2221;
--color-primary-800: #391514;
--color-primary-900: #130707;
}