Palette

Coral Reef Shimmer

A lively underwater world with vibrant coral, delicate anemones, and clear blue water.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B6B#FFC0CB#A8DADC#457B9D#1D3557

Palette guide

How to use Coral Reef Shimmer

Overview

The Coral Reef Shimmer palette offers a captivating blend of vibrant corals and deep, cool blues, perfectly capturing the essence of a lively underwater world. It features a striking bright coral #FF6B6B and a delicate light pink #FFC0CB, beautifully contrasted with a refreshing Light Blue #A8DADC, a medium Steel Blue #457B9D, and a profound Dark Midnight Blue #1D3557. This palette is ideal for designs that aim to be playful yet sophisticated, evoking the dynamic interplay of light and shadow in a thriving marine ecosystem, making it suitable for modern branding or digital interfaces.

Best used for

Modern website design
Marine-themed product branding
Educational materials for oceanography
Children's apparel or toy design
App interfaces with a fresh, clean aesthetic
Social media campaigns for environmental causes

Suggested color roles

primary

Use Dark Midnight Blue #1D3557 for foundational elements or strong branding, conveying stability.

secondary

Bright coral #FF6B6B can be used for calls-to-action or vibrant headings to add energy.

accent

Light Blue #A8DADC works well for highlights, interactive elements, or backgrounds, offering freshness.

background

Consider a clean off-white, or use #A8DADC for a light, airy base.

text

Dark Midnight Blue #1D3557 is excellent for primary text, ensuring strong readability.

Accessibility notes

#FFC0CB and #A8DADC are too light for text; pair with very dark colors.
#FF6B6B might not provide sufficient contrast with white text for WCAG AA.
Ensure #457B9D has adequate contrast when used for text against lighter backgrounds.
Always check contrast ratios, especially for smaller text and interactive elements.

Recommended combinations

Deep Contrast

Ideal for high-impact branding, hero sections, or main navigation.

#1D3557 · #FF6B6B · #A8DADC

Playful Accents

Excellent for subtle backgrounds, secondary information, or decorative patterns.

#FFC0CB · #A8DADC · #457B9D

Balanced Dynamic

Use for designs needing a strong, yet balanced, visual presence.

#457B9D · #FF6B6B · #1D3557

CSS variables

:root {
  --coral-reef-shimmer-2-1: #FF6B6B;
  --coral-reef-shimmer-2-2: #FFC0CB;
  --coral-reef-shimmer-2-3: #A8DADC;
  --coral-reef-shimmer-2-4: #457B9D;
  --coral-reef-shimmer-2-5: #1D3557;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-shimmer-2": {
        1: "#FF6B6B",
        2: "#FFC0CB",
        3: "#A8DADC",
        4: "#457B9D",
        5: "#1D3557",
      }
    }
  }
}

Hex values

Color 1#FF6B6B

Color 2#FFC0CB

Color 3#A8DADC

Color 4#457B9D

Color 5#1D3557

Accessibility

Contrast checker

1.8:1Fail

1.7:1Fail

4.5:1AA18

1.8:1Fail

1:1Fail

3:1Fail

8:1AAA

1.8:1Fail

1:1Fail

3:1AA18

8.1:1AAA

1.7:1Fail

3:1Fail

3:1AA18

2.7:1Fail

4.5:1AA18

8:1AAA

8.1:1AAA

2.7:1Fail

Similar palettes

More like Coral Reef Shimmer

Coral Reef Shimmer

See it in context.

Ready when you are.

Built with Coral Reef Shimmer.

How to use Coral Reef Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Contrast

Playful Accents

Balanced Dynamic

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Shimmer