Curious Blue
See how #1D8FE1 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Curious Blue Base */
--color-primary: #1D8FE1;
--color-primary-rgb: 29 143 225;
--color-primary-hsl: 205 77% 50%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e8f4fc;
--color-primary-100: #bbdef6;
--color-primary-200: #8ec7f0;
--color-primary-300: #61b1ea;
--color-primary-400: #349be5;
--color-primary-500: #1a81cb;
--color-primary-600: #15659e;
--color-primary-700: #0f4871;
--color-primary-800: #092b44;
--color-primary-900: #030e17;
}