Royal Blue
See how #2657EB looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Royal Blue Base */
--color-primary: #2657EB;
--color-primary-rgb: 38 87 235;
--color-primary-hsl: 225 83% 54%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e8edfd;
--color-primary-100: #b9c9f8;
--color-primary-200: #8aa5f4;
--color-primary-300: #5c81f0;
--color-primary-400: #2d5deb;
--color-primary-500: #1443d2;
--color-primary-600: #0f34a3;
--color-primary-700: #0b2575;
--color-primary-800: #071646;
--color-primary-900: #020717;
}