Sapphire
See how #2F519E looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Sapphire Base */
--color-primary: #2F519E;
--color-primary-rgb: 47 81 158;
--color-primary-hsl: 222 54% 40%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #ebeff9;
--color-primary-100: #c4d0ed;
--color-primary-200: #9db1e2;
--color-primary-300: #7692d6;
--color-primary-400: #4e73ca;
--color-primary-500: #355ab1;
--color-primary-600: #294689;
--color-primary-700: #1d3262;
--color-primary-800: #121e3b;
--color-primary-900: #060a14;
}