Vida Loca
See how #5BB226 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Vida Loca Base */
--color-primary: #5BB226;
--color-primary-rgb: 91 178 38;
--color-primary-hsl: 97 65% 42%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #f0fbea;
--color-primary-100: #d3f2c0;
--color-primary-200: #b6e996;
--color-primary-300: #98e06c;
--color-primary-400: #7bd742;
--color-primary-500: #61bd28;
--color-primary-600: #4c931f;
--color-primary-700: #366916;
--color-primary-800: #203f0d;
--color-primary-900: #0b1504;
}