Waikawa Gray
See how #5A6E9C looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Waikawa Gray Base */
--color-primary: #5A6E9C;
--color-primary-rgb: 90 110 156;
--color-primary-hsl: 222 27% 48%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #eff1f6;
--color-primary-100: #ced5e3;
--color-primary-200: #aeb8d0;
--color-primary-300: #8e9cbe;
--color-primary-400: #6d80ab;
--color-primary-500: #546692;
--color-primary-600: #415071;
--color-primary-700: #2f3951;
--color-primary-800: #1c2231;
--color-primary-900: #090b10;
}