Smalt Blue
See how #51808F looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Smalt Blue Base */
--color-primary: #51808F;
--color-primary-rgb: 81 128 143;
--color-primary-hsl: 195 28% 44%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #eff4f6;
--color-primary-100: #cedee3;
--color-primary-200: #adc8d1;
--color-primary-300: #8db2bf;
--color-primary-400: #6c9cac;
--color-primary-500: #538393;
--color-primary-600: #406672;
--color-primary-700: #2e4952;
--color-primary-800: #1c2c31;
--color-primary-900: #090f10;
}