Fun Blue
See how #155799 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Fun Blue Base */
--color-primary: #155799;
--color-primary-rgb: 21 87 153;
--color-primary-hsl: 210 76% 34%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e9f2fc;
--color-primary-100: #bcd9f6;
--color-primary-200: #8fbff0;
--color-primary-300: #62a6ea;
--color-primary-400: #358ce3;
--color-primary-500: #1c73ca;
--color-primary-600: #15599d;
--color-primary-700: #0f4070;
--color-primary-800: #092643;
--color-primary-900: #030d16;
}