Astral
See how #3584A7 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Astral Base */
--color-primary: #3584A7;
--color-primary-rgb: 53 132 167;
--color-primary-hsl: 198 52% 43%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #ecf5f9;
--color-primary-100: #c5e1ed;
--color-primary-200: #9ecde0;
--color-primary-300: #77b8d4;
--color-primary-400: #51a4c8;
--color-primary-500: #378bae;
--color-primary-600: #2b6c88;
--color-primary-700: #1f4d61;
--color-primary-800: #122e3a;
--color-primary-900: #060f13;
}