Niagara
See how #06A189 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Niagara Base */
--color-primary: #06A189;
--color-primary-rgb: 6 161 137;
--color-primary-hsl: 171 93% 33%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e6fefb;
--color-primary-100: #b5fcf2;
--color-primary-200: #84fbe9;
--color-primary-300: #53f9e0;
--color-primary-400: #22f7d7;
--color-primary-500: #08ddbd;
--color-primary-600: #06ac93;
--color-primary-700: #047b69;
--color-primary-800: #034a3f;
--color-primary-900: #011915;
}