Palette

Coral Reef Dawn

A bright, inviting palette capturing the first light hitting a vibrant underwater ecosystem.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF7F50#F08080#FFA07A#ADD8E6#6A5ACD

Palette guide

How to use Coral Reef Dawn

Overview

The Coral Reef Dawn palette is an inviting and energetic collection, perfect for designs that capture the vibrant essence of a tropical morning. It features a prominent coral orange, #FF7F50, complemented by a softer light coral red, #F08080, and a delicate peach coral, #FFA07A, creating a warm and approachable feel. These lively hues are beautifully balanced by the serene light blue, #ADD8E6, reminiscent of clear ocean waters, and a sophisticated slate blue, #6A5ACD, which adds depth and stability. This palette is ideal for projects seeking a harmonious blend of warmth, freshness, and understated elegance, evoking a lively underwater ecosystem.

Best used for

Travel agency websites and brochures
Marine conservation initiatives branding
Summer event posters and invitations
Children's educational apps about nature
Packaging for beach-themed products
Casual wear fashion lines

Suggested color roles

primary

#FF7F50 - Use this vibrant coral orange for main calls-to-action, primary buttons, or key brand elements to convey energy and warmth.

secondary

#ADD8E6 - A gentle light blue, excellent for background sections, supporting graphics, or subtle UI elements to add a calming contrast.

accent

#6A5ACD - This sophisticated slate blue provides a strong, elegant accent for important links, hover states, or small decorative details.

background

#FFA07A - A soft peach coral that can serve as a warm, inviting background, especially when paired with darker text for readability.

text

#6A5ACD - For body text, the slate blue offers good readability against lighter backgrounds. Consider dark charcoal or black for general body text or white for text on #FF7F50.

Accessibility notes

Ensure sufficient contrast for text using #F08080 or #FFA07A against similar light backgrounds.
#FF7F50 (coral orange) requires dark text (e.g., #6A5ACD or black) for optimal readability.
The slate blue #6A5ACD offers good contrast for text on #ADD8E6 or #FFA07A.
Avoid using #ADD8E6 for small text on a white or very light background due to potential low contrast.

Recommended combinations

Oceanic Glow

Excellent for creating a lively yet balanced feel, ideal for hero images or prominent UI sections.

#FF7F50 · #ADD8E6 · #6A5ACD

Soft Sunset

Perfect for softer, inviting interfaces, blending warm corals with a serene light blue for harmony.

#F08080 · #FFA07A · #ADD8E6

Deep Current

Provides a sophisticated contrast, with the deep blue grounding the vibrant coral and light blue accents.

#6A5ACD · #FF7F50 · #ADD8E6

CSS variables

:root {
  --coral-reef-dawn-1: #FF7F50;
  --coral-reef-dawn-2: #F08080;
  --coral-reef-dawn-3: #FFA07A;
  --coral-reef-dawn-4: #ADD8E6;
  --coral-reef-dawn-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-dawn": {
        1: "#FF7F50",
        2: "#F08080",
        3: "#FFA07A",
        4: "#ADD8E6",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#FF7F50

Color 2#F08080

Color 3#FFA07A

Color 4#ADD8E6

Color 5#6A5ACD

Accessibility

Contrast checker

1:1Fail

1.3:1Fail

1.6:1Fail

2.1:1Fail

1:1Fail

1.3:1Fail

1.7:1Fail

2:1Fail

1.3:1Fail

2.7:1Fail

1.6:1Fail

1.7:1Fail

1.3:1Fail

3.5:1AA18

2.1:1Fail

2:1Fail

2.7:1Fail

3.5:1AA18

Similar palettes

More like Coral Reef Dawn

Coral Reef Dawn

See it in context.

Ready when you are.

Built with Coral Reef Dawn.

How to use Coral Reef Dawn

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Oceanic Glow

Soft Sunset

Deep Current

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Dawn