Curious Blue
See how #2596D1 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: #2596D1;
--color-primary-rgb: 37 150 209;
--color-primary-hsl: 201 70% 48%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e9f5fb;
--color-primary-100: #bee1f4;
--color-primary-200: #93cdec;
--color-primary-300: #67b8e4;
--color-primary-400: #3ca4dd;
--color-primary-500: #228bc3;
--color-primary-600: #1b6c98;
--color-primary-700: #134d6c;
--color-primary-800: #0b2e41;
--color-primary-900: #040f16;
}