Back to palettes

Palette

Ocean Reef Shimmer

Cool blues and refreshing greens evoke the serene, sparkling life found within a vibrant, sunlit coral reef.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Reef Shimmer 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 Ocean Reef Shimmer.

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

Data visualization

#1C5D99#62929E#58B99D#A8DCDA#E8FBFA

Palette guide

How to use Ocean Reef Shimmer

Overview

The Ocean Reef Shimmer palette evokes the serene, sparkling life of a sunlit coral reef with its cool blues and refreshing greens. Anchored by the deep ocean blue #1C5D99, it transitions through the muted teal of #62929E and the vibrant seafoam green #58B99D. Lighter tones like the airy #A8DCDA and the near-white #E8FBFA complete the collection, offering a sense of depth and tranquility. This palette is ideal for designers creating natural, eco-friendly, or nautical-themed projects, providing a harmonious blend of aquatic hues. Developers can apply these hex codes to build user interfaces that feel clean, calming, and connected to nature, perfect for environmental organizations or travel brands.

Best used for

  • Eco-conscious brand identities
  • Nautical-themed websites or products
  • Travel and tourism marketing materials
  • Environmental non-profit designs
  • Health and wellness applications
  • Aquatic-themed interior decor

Suggested color roles

primary

#1C5D99 (Deep Ocean Blue) - Ideal for headers, primary navigation, or strong brand elements, providing depth and stability.

secondary

#62929E (Muted Teal) - Use for subheadings, secondary buttons, or background sections that need a softer, yet distinct, presence.

accent

#58B99D (Seafoam Green) - Excellent for call-to-action buttons, key data visualization, or interactive highlights to draw attention.

background

#E8FBFA (Near White) - Provides a clean, light base, allowing the richer blues and greens to stand out.

text

A dark grey like #333333 or even #1C5D99 for headings on light backgrounds, ensuring excellent readability.

Accessibility notes

  • #1C5D99 offers strong contrast for text on #E8FBFA and #A8DCDA.
  • Text in #62929E and #58B99D on #E8FBFA should meet WCAG AA standards, but verify.
  • Avoid placing light text on #62929E or #58B99D without checking contrast ratios carefully.
  • Ensure interactive elements are clearly distinguishable, especially if using similar hues like #A8DCDA and #E8FBFA adjacent.

Recommended combinations

Deep Ocean

A robust primary blue with a crisp white background and muted teal for secondary information, creating a professional and calm look.

#1C5D99 · #E8FBFA · #62929E

Reef Highlight

A light, airy background with a vibrant seafoam green accent and a soft blue for supporting elements, perfect for a fresh feel.

#E8FBFA · #58B99D · #A8DCDA

Balanced Aquatic

Muted teal as a base, deep blue for strong contrasts, and seafoam green for energetic highlights in a rich design.

#62929E · #1C5D99 · #58B99D

CSS variables

:root {
  --ocean-reef-shimmer-2-1: #1C5D99;
  --ocean-reef-shimmer-2-2: #62929E;
  --ocean-reef-shimmer-2-3: #58B99D;
  --ocean-reef-shimmer-2-4: #A8DCDA;
  --ocean-reef-shimmer-2-5: #E8FBFA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-reef-shimmer-2": {
        1: "#1C5D99",
        2: "#62929E",
        3: "#58B99D",
        4: "#A8DCDA",
        5: "#E8FBFA",
      }
    }
  }
}

Related searches

coral reef color palettecalm aquatic design colorseco friendly blue green paletteserene ocean UI colorsnautical brand color scheme

Palette colors

Hex values

Color 1#1C5D99
·
Color 2#62929E
·
Color 3#58B99D
·
Color 4#A8DCDA
·
Color 5#E8FBFA
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.9:1Fail
4.5:1AA
6.4:1AA
2
2:1Fail
1.4:1Fail
2.3:1Fail
3.2:1AA18
3
2.9:1Fail
1.4:1Fail
1.6:1Fail
2.2:1Fail
4
4.5:1AA
2.3:1Fail
1.6:1Fail
1.4:1Fail
5
6.4:1AA
3.2:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Ocean Reef Shimmer

View all cool
Abyssal Current Glide
Aqua Marine Reef
Azure Reef Shimmer
Deep Kelp Forest
Deep Ocean Bloom
Emerald Grotto Depths