Emerald
See how #59C173 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Emerald Base */
--color-primary: #59C173;
--color-primary-rgb: 89 193 115;
--color-primary-hsl: 135 46% 55%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #ecf8ef;
--color-primary-100: #c7ead0;
--color-primary-200: #a2ddb1;
--color-primary-300: #7dcf91;
--color-primary-400: #57c172;
--color-primary-500: #3ea858;
--color-primary-600: #308245;
--color-primary-700: #225d31;
--color-primary-800: #15381d;
--color-primary-900: #07130a;
}