Back to palettes

Palette

Deep Reef Sapphire

Vibrant blues mimicking the dazzling aquatic life and clear waters of a thriving sapphire coral reef.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Reef Sapphire 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 Deep Reef Sapphire.

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

Data visualization

#005B8F#008BBE#3EAFD6#003A5F#6ED4F0

Palette guide

How to use Deep Reef Sapphire

Overview

The Deep Reef Sapphire palette mimics the dazzling aquatic life and clear waters of a thriving sapphire coral reef, offering vibrant blues. From the profound #003A5F to the luminous #6ED4F0, this palette is ideal for designs that demand energy, vibrancy, and a sense of underwater wonder. Designers can craft immersive digital experiences, captivating branding, and lively UI themes. Developers will find these hex codes perfect for projects related to marine conservation, travel, or any application that benefits from a fresh, energetic, and visually striking aesthetic. The progression from #005B8F to #3EAFD6 allows for excellent depth and vivid highlights.

Best used for

  • Aquatic sports or adventure brands
  • Youth-focused educational content on marine life
  • Interactive game interfaces (underwater exploration)
  • Tropical resort or travel websites
  • Environmental awareness campaigns (coral reefs)
  • Modern technology company branding

Suggested color roles

primary

Utilize #005B8F as the main background or primary content color, providing a deep, yet vibrant, and stable foundation.

secondary

Apply #008BBE for secondary content areas, panels, or navigation, offering a clear visual distinction and layered effect.

accent

Introduce #6ED4F0 as a powerful, luminous accent for calls-to-action, key features, or interactive elements, ensuring maximum impact.

background

The deepest hue, #003A5F, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound depth.

text

For optimal readability, use a crisp white or very light gray. #6ED4F0 can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

  • Ensure high contrast for text on #003A5F, #005B8F, and #008BBE by using light text (e.g., white or #6ED4F0).
  • The lightest color, #6ED4F0, provides excellent contrast for primary text against all darker blues in the palette.
  • Avoid using #003A5F and #005B8F for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Sapphire Depths

Ideal for creating a layered, deep background or card system, conveying gradual depth and rich blue tones.

#003A5F · #005B8F · #008BBE

Reef Glow

Use #005B8F as a base, with #3EAFD6 for secondary elements and #6ED4F0 for vibrant, glowing highlights or interactive states.

#005B8F · #3EAFD6 · #6ED4F0

Vibrant Contrast

Excellent for a dark, profound background with a clear, electric accent and a strong mid-tone for supporting details.

#003A5F · #6ED4F0 · #008BBE

CSS variables

:root {
  --deep-reef-sapphire-1: #005B8F;
  --deep-reef-sapphire-2: #008BBE;
  --deep-reef-sapphire-3: #3EAFD6;
  --deep-reef-sapphire-4: #003A5F;
  --deep-reef-sapphire-5: #6ED4F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-reef-sapphire": {
        1: "#005B8F",
        2: "#008BBE",
        3: "#3EAFD6",
        4: "#003A5F",
        5: "#6ED4F0",
      }
    }
  }
}

Related searches

vibrant blue reef palettedeep sapphire hex codesaquatic blue UI designenergetic ocean color schemecoral reef blue branding

Palette colors

Hex values

Color 1#005B8F
·
Color 2#008BBE
·
Color 3#3EAFD6
·
Color 4#003A5F
·
Color 5#6ED4F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.9:1Fail
1.6:1Fail
4.3:1AA18
2
1.9:1Fail
1.5:1Fail
3.1:1AA18
2.3:1Fail
3
2.9:1Fail
1.5:1Fail
4.7:1AA
1.5:1Fail
4
1.6:1Fail
3.1:1AA18
4.7:1AA
7:1AA
5
4.3:1AA18
2.3:1Fail
1.5:1Fail
7:1AA

Similar palettes

More like Deep Reef Sapphire

View all cool
Oceanic Reef Life
Coral Lagoon Gleam
Aegean Blue Depths
Celestial Ocean Reef
Teal Wave Current
Tropical Reef Vista