Sapphire
Meet Sapphire (#0F52BA), a brilliant blue that balances intensity with remarkable clarity. This pure, saturated hue offers a striking alternative to common blues, providing a jolt of energy and depth to any palette without feeling overwhelming.
What color is Sapphire?
Sapphire is a deep, saturated blue that carries a significant visual weight and intensity.
The #0F52BA shade has cool undertones, giving it a composed and profound character distinct from brighter, more electric blues.
What is the meaning of Sapphire in design?
The color Sapphire, #0F52BA, is deeply associated with wisdom, trust, and stability. It projects a sense of integrity and seriousness, making it a popular choice for institutions that want to communicate reliability and authority.
Historically, Sapphire has been linked to royalty and the divine, symbolizing nobility and truth. This heritage gives the color an air of sophistication and importance.
How can I use the color Sapphire in my UI design?
Sapphire, with its hex code #0F52BA, is a commanding color best used to draw attention to important interface elements like primary buttons, links, or icons. For a clean, professional look, pair it with crisp whites and light grays to ensure high contrast and readability. To create a more dynamic composition, consider a split-complementary scheme, matching Sapphire with a soft orange or a warm yellow for accents.
While not as common as other primary blues, Sapphire's specific shade appears in the branding of companies like Sprout Social, IKEA, and Afterpay, often to communicate reliability and sophistication. Its relative infrequency in the market presents an opportunity for a brand to build a distinct and memorable visual identity.
To see how Sapphire works in practice, use the tools below. You can browse curated palettes, check color contrast ratios for accessibility compliance, and preview #0F52BA in UI components from well-known applications.
Using Sapphire color codes
The most direct way to implement Sapphire in digital work is with its hex code, #0F52BA. For different mediums, you will need to convert this value. Digital displays use RGB (Red, Green, Blue) to mix light, while print projects require CMYK (Cyan, Magenta, Yellow, Key/Black) for ink. Other formats like HSL (Hue, Saturation, Lightness) offer a more intuitive way to make adjustments.
To simplify your workflow, we have converted #0F52BA into a range of popular formats below. You can copy the exact codes you need for your project.
Analogous
Analogous colors are found next to Sapphire on the color wheel. This combination creates a harmonious and tranquil palette, perfect for serene designs.
Complementary
Complementary colors sit opposite each other on the color wheel. When paired with Sapphire, its complement creates a striking, high-contrast visual effect.
Split Complementary
A split complementary scheme for Sapphire pairs it with the two colors adjacent to its direct complement, offering a vibrant yet balanced palette.
Triadic
Triadic colors for Sapphire are found by selecting two additional hues equidistant on the color wheel, resulting in a bold, balanced combination.
Tetradic
A tetradic scheme pairs Sapphire with three other colors, creating two complementary pairs that form a rectangle on the color wheel.
Square
A square color scheme pairs Sapphire with three other colors, all equidistant on the color wheel. This arrangement creates a vibrant, high-contrast palette.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
Shades are darker versions of Sapphire, created by adding black to give the color depth and weight.
Tints
Tints are lighter versions of Sapphire, created by adding white for a softer, airier feel.
Tones
Tones are created by adding gray to Sapphire, resulting in a softer, less saturated hue.
Hues
Hues are variations of Sapphire (#0F52BA), altering its intensity and temperature for different visual effects.
Never run out of inspiration again.
Use Mobbin for free as long as you like or get full access with any of our paid plans.
