Fountain Blue
See how #50A7C2 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Fountain Blue Base */
--color-primary: #50A7C2;
--color-primary-rgb: 80 167 194;
--color-primary-hsl: 194 48% 54%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #ecf6f8;
--color-primary-100: #c6e3eb;
--color-primary-200: #a1d0de;
--color-primary-300: #7bbdd1;
--color-primary-400: #55aac3;
--color-primary-500: #3c90aa;
--color-primary-600: #2e7084;
--color-primary-700: #21505e;
--color-primary-800: #143039;
--color-primary-900: #071013;
}