Back to palettes

Palette

Sapphire Symphony

A deep, harmonious range of blues, reminiscent of a grand sapphire's many facets and cool depths.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire Symphony reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Sapphire Symphony.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2A3F6D#3B5A96#6485BB#8FAACE#BCCCDC

Palette guide

How to use Sapphire Symphony

Overview

The "Sapphire Symphony" palette presents a deep, harmonious range of blues, reminiscent of a grand sapphire's many facets and cool depths. This elegant collection spans from the rich, foundational #2A3F6D (Dark Sapphire) and #3B5A96 (Medium Sapphire) to the more refined #6485BB (Cornflower Blue), then softening into the delicate #8FAACE (Light Blue) and #BCCCDC (Very Light Blue). It's an ideal choice for designs seeking to convey sophistication, tranquility, and structured beauty, perfect for corporate branding, luxury product design, or elegant editorial layouts that demand a refined, cohesive blue aesthetic.

Best used for

  • Corporate identity and branding
  • Luxury goods packaging
  • Financial services websites
  • Architectural firm portfolios
  • High-end stationery design
  • Elegant interior design concepts

Suggested color roles

primary

#3B5A96 (Medium Sapphire) - A sophisticated, dependable blue for main headings, navigation, or brand elements, exuding professionalism.

secondary

#6485BB (Cornflower Blue) - A versatile blue for subheadings, data visualization, or secondary calls-to-action, providing balance.

accent

#8FAACE (Light Blue) - A gentle, airy blue perfect for subtle highlights, active states, or graphic elements that require a softer touch.

background

#BCCCDC (Very Light Blue) - The lightest shade, offering a clean, expansive, and subtly cool backdrop that supports the entire palette.

text

#2A3F6D (Dark Sapphire) - The deepest blue, ensuring excellent readability for body text against lighter backgrounds, maintaining the palette's elegant integrity.

Accessibility notes

  • Ensure strong contrast between #2A3F6D text and lighter backgrounds like #BCCCDC or #8FAACE.
  • Be cautious using #8FAACE or #BCCCDC for small text against mid-tone blues like #6485BB as contrast may be insufficient.
  • Provide non-color cues for interactive elements, especially if using subtle blue shifts for states.
  • Review contrast for any text placed on colored backgrounds to meet WCAG AA standards.

Recommended combinations

Deep Harmony

Dark sapphire for footers or strong headers, with very light blue for background, and medium sapphire for content.

#2A3F6D · #BCCCDC · #3B5A96

Refined Contrast

Medium sapphire for main sections, light blue for interactive elements, and dark sapphire for critical text.

#3B5A96 · #8FAACE · #2A3F6D

Subtle Gradient

Cornflower blue for section headers, with very light blue as background, and light blue for secondary text.

#6485BB · #BCCCDC · #8FAACE

CSS variables

:root {
  --sapphire-symphony-1: #2A3F6D;
  --sapphire-symphony-2: #3B5A96;
  --sapphire-symphony-3: #6485BB;
  --sapphire-symphony-4: #8FAACE;
  --sapphire-symphony-5: #BCCCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-symphony": {
        1: "#2A3F6D",
        2: "#3B5A96",
        3: "#6485BB",
        4: "#8FAACE",
        5: "#BCCCDC",
      }
    }
  }
}

Related searches

elegant blue color schemecorporate blue palettesophisticated blue huesoceanic blue designmonochromatic blue branding

Palette colors

Hex values

Color 1#2A3F6D
·
Color 2#3B5A96
·
Color 3#6485BB
·
Color 4#8FAACE
·
Color 5#BCCCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.8:1Fail
4.3:1AA18
6.3:1AA
2
1.5:1Fail
1.8:1Fail
2.9:1Fail
4.1:1AA18
3
2.8:1Fail
1.8:1Fail
1.6:1Fail
2.3:1Fail
4
4.3:1AA18
2.9:1Fail
1.6:1Fail
1.5:1Fail
5
6.3:1AA
4.1:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Sapphire Symphony

View all cool
Azure Sapphire Gleam
Cobalt Ink Flow
Deep Sapphire Gaze
Midnight Symphony Orchestra
Oceanic Gemstone Gleam
Sapphire Gemstone Depth