Emerald
See how #44C489 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Emerald Base */
--color-primary: #44C489;
--color-primary-rgb: 68 196 137;
--color-primary-hsl: 152 52% 52%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #ecf9f3;
--color-primary-100: #c5edda;
--color-primary-200: #9ee0c1;
--color-primary-300: #77d4a9;
--color-primary-400: #51c890;
--color-primary-500: #37ae77;
--color-primary-600: #2b885c;
--color-primary-700: #1f6142;
--color-primary-800: #123a28;
--color-primary-900: #06130d;
}