Waikawa Gray
See how #636FA4 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: #636FA4;
--color-primary-rgb: 99 111 164;
--color-primary-hsl: 229 26% 52%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #eff0f6;
--color-primary-100: #cfd2e3;
--color-primary-200: #afb5d0;
--color-primary-300: #8f97bd;
--color-primary-400: #6e79aa;
--color-primary-500: #556091;
--color-primary-600: #424b70;
--color-primary-700: #2f3550;
--color-primary-800: #1c2030;
--color-primary-900: #090b10;
}