Vista Blue
See how #8FD6B4 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Vista Blue Base */
--color-primary: #8FD6B4;
--color-primary-rgb: 143 214 180;
--color-primary-hsl: 151 46% 70%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #ecf8f2;
--color-primary-100: #c7ead9;
--color-primary-200: #a2ddc0;
--color-primary-300: #7dcfa7;
--color-primary-400: #57c18e;
--color-primary-500: #3ea875;
--color-primary-600: #30825b;
--color-primary-700: #225d41;
--color-primary-800: #153827;
--color-primary-900: #07130d;
}