Venice Blue
See how #055989 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Venice Blue Base */
--color-primary: #055989;
--color-primary-rgb: 5 89 137;
--color-primary-hsl: 202 93% 28%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #e6f5fe;
--color-primary-100: #b5e2fc;
--color-primary-200: #84cffb;
--color-primary-300: #53bcf9;
--color-primary-400: #22a9f7;
--color-primary-500: #088fdd;
--color-primary-600: #066fac;
--color-primary-700: #04507b;
--color-primary-800: #03304a;
--color-primary-900: #011019;
}