Magic Mint
See how #99F2C8 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Magic Mint Base */
--color-primary: #99F2C8;
--color-primary-rgb: 153 242 200;
--color-primary-hsl: 152 77% 77%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e8fcf3;
--color-primary-100: #bbf6db;
--color-primary-200: #8ef0c3;
--color-primary-300: #61eaaa;
--color-primary-400: #34e592;
--color-primary-500: #1acb79;
--color-primary-600: #159e5e;
--color-primary-700: #0f7143;
--color-primary-800: #094428;
--color-primary-900: #03170d;
}