Citron
See how #9EA91F looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Citron Base */
--color-primary: #9EA91F;
--color-primary-rgb: 158 169 31;
--color-primary-hsl: 65 69% 39%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fafbe9;
--color-primary-100: #eff3be;
--color-primary-200: #e4eb93;
--color-primary-300: #d9e368;
--color-primary-400: #cedb3d;
--color-primary-500: #b5c224;
--color-primary-600: #8d971c;
--color-primary-700: #646c14;
--color-primary-800: #3c410c;
--color-primary-900: #141604;
}