Pine Cone
See how #6D5E54 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Pine Cone Base */
--color-primary: #6D5E54;
--color-primary-rgb: 109 94 84;
--color-primary-hsl: 24 13% 38%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f4f2f1;
--color-primary-100: #ded8d4;
--color-primary-200: #c8beb7;
--color-primary-300: #b1a39a;
--color-primary-400: #9b897d;
--color-primary-500: #827064;
--color-primary-600: #65574e;
--color-primary-700: #483e37;
--color-primary-800: #2b2521;
--color-primary-900: #0e0c0b;
}