Pickled Bean
See how #6E4826 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Pickled Bean Base */
--color-primary: #6E4826;
--color-primary-rgb: 110 72 38;
--color-primary-hsl: 28 49% 29%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f8f2ec;
--color-primary-100: #ebd8c6;
--color-primary-200: #debda0;
--color-primary-300: #d1a37a;
--color-primary-400: #c48954;
--color-primary-500: #ab6f3b;
--color-primary-600: #85562e;
--color-primary-700: #5f3e21;
--color-primary-800: #392514;
--color-primary-900: #130c07;
}