Curious Blue
See how #26A0DA 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: #26A0DA;
--color-primary-rgb: 38 160 218;
--color-primary-hsl: 199 71% 50%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e9f6fb;
--color-primary-100: #bee3f4;
--color-primary-200: #92d0ed;
--color-primary-300: #66bde5;
--color-primary-400: #3baade;
--color-primary-500: #2191c4;
--color-primary-600: #1a7099;
--color-primary-700: #12506d;
--color-primary-800: #0b3041;
--color-primary-900: #041016;
}