Pine Glade
See how #C2CE9C looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Pine Glade Base */
--color-primary: #C2CE9C;
--color-primary-rgb: 194 206 156;
--color-primary-hsl: 74 34% 71%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #f5f7ee;
--color-primary-100: #e0e6cc;
--color-primary-200: #cbd5aa;
--color-primary-300: #b6c487;
--color-primary-400: #a1b365;
--color-primary-500: #889a4c;
--color-primary-600: #69783b;
--color-primary-700: #4b552a;
--color-primary-800: #2d3319;
--color-primary-900: #0f1108;
}