Gulf Blue
See how #051657 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Gulf Blue Base */
--color-primary: #051657;
--color-primary-rgb: 5 22 87;
--color-primary-hsl: 228 89% 18%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e7ebfe;
--color-primary-100: #b7c4fb;
--color-primary-200: #879df8;
--color-primary-300: #5676f5;
--color-primary-400: #264ff2;
--color-primary-500: #0d35d9;
--color-primary-600: #0a2aa9;
--color-primary-700: #071e78;
--color-primary-800: #041248;
--color-primary-900: #010618;
}