Sapphire color guide
Richer and slightly warmer than cobalt, with the depth of a gemstone rather than a printing ink.
- Best for
- Premium positioning where royal blue feels too common.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with sapphire
Combinations that hold up in a real layout rather than only on the colour wheel.
Sapphire color harmonies
Sapphire shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Sapphire FAQ
What is the hex code for sapphire?
Sapphire is #0F52BA. In other formats that is rgb(15, 82, 186), hsl(216, 85%, 39%), and approximately cmyk(92%, 56%, 0%, 27%) for print.
What colors go with sapphire?
Gold, Cream, White all pair well with sapphire. Premium positioning where royal blue feels too common.
Is sapphire accessible for text?
Yes — sapphire text on white reaches 7.15:1, which passes WCAG AA for body text.
Should text on sapphire be black or white?
Use white text. It gives the higher contrast ratio of the two against #0F52BA.