Spindle
See how #B6CEE8 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Spindle Base */
--color-primary: #B6CEE8;
--color-primary-rgb: 182 206 232;
--color-primary-hsl: 211 52% 81%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #ecf2f9;
--color-primary-100: #c5d8ed;
--color-primary-200: #9ebee0;
--color-primary-300: #77a4d4;
--color-primary-400: #518ac8;
--color-primary-500: #3771ae;
--color-primary-600: #2b5888;
--color-primary-700: #1f3f61;
--color-primary-800: #12263a;
--color-primary-900: #060d13;
}