Spindle
See how #B6D1EA looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Spindle Base */
--color-primary: #B6D1EA;
--color-primary-rgb: 182 209 234;
--color-primary-hsl: 209 55% 82%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #ebf2f9;
--color-primary-100: #c4d9ee;
--color-primary-200: #9cc0e2;
--color-primary-300: #75a7d7;
--color-primary-400: #4d8ecb;
--color-primary-500: #3475b2;
--color-primary-600: #285b8a;
--color-primary-700: #1d4163;
--color-primary-800: #11273b;
--color-primary-900: #060d14;
}