Palette

Aquatic Coral Dance

Gentle, sunlit pastels reflecting the delicate beauty of a coral reef.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aquatic Coral Dance 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 Aquatic Coral Dance.

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

Data visualization

#FF6F61#FF9966#FFCC99#FAD7A0#FEEBC3

Palette guide

How to use Aquatic Coral Dance

Overview

The "Aquatic Coral Dance" palette is a gentle and sunlit collection, reflecting the delicate beauty of a coral reef with soft, warm pastels. This inviting palette features a range of coral, orange, and peach tones, including the soft red-orange #FF6F61, the warm Orange #FF9966, and the lighter Peach #FFCC99. Even softer, more ethereal shades like Light Orange #FAD7A0 and the very pale Vanilla #FEEBC3 complete this harmonious set. Developers can utilize these colors for user interfaces that aim for a friendly, warm, and approachable feel. Designers will find this palette perfect for branding, web design, or illustrations that require a comforting, joyful, and subtly vibrant aesthetic, reminiscent of a serene underwater world.

Best used for

Baby and children's brands
Gentle beauty products
Summer lifestyle blogs
Dessert and bakery packaging
Wedding and event invitations
Soft, feminine branding

Suggested color roles

primary

A soft yet distinctive coral-red #FF6F61, ideal for main headings, important buttons, or brand focal points, offering warmth.

secondary

A warm, inviting orange #FF9966 that complements the primary, suitable for supporting elements, subheadings, or decorative details.

accent

A delicate peach #FFCC99 that provides a gentle highlight, perfect for subtle accents, icons, or interactive states.

background

A very pale, almost vanilla tone #FEEBC3, offering a soft, warm, and clean backdrop that enhances the pastel nature of the palette.

text

For primary text, use #333333 (charcoal) or #5A3D2B (deep brown) against #FEEBC3 or #FAD7A0. For headings, #FF6F61 can be used on light backgrounds.

Accessibility notes

Text using #FF6F61 or #FF9966 on light backgrounds like #FEEBC3 will require careful contrast checking for wcag compliance.
Lighter shades like #FFCC99, #FAD7A0, and #FEEBC3 are unsuitable for small body text; always use a darker alternative.
Ensure interactive elements are clearly discernible, perhaps with a darker outline or text.
Consider pairing with a very dark neutral (e.g., charcoal or dark brown) for all body text to ensure readability.

Recommended combinations

Gentle Reef Base

For inviting main layouts, with coral-red as a warm anchor, vanilla as a soft background, and warm orange for secondary elements.

#FF6F61 · #FEEBC3 · #FF9966

Sunlit Layers

Ideal for creating subtle, layered backgrounds or gentle gradients, evoking a sun-dappled, ethereal feel.

#FFCC99 · #FAD7A0 · #FEEBC3

Warm Emphasis

Effective for calls to action or highlighted content, using warm orange for buttons, vanilla for surrounding space, and coral-red for button text or icons.

#FF9966 · #FEEBC3 · #FF6F61

CSS variables

:root {
  --aquatic-coral-dance-1: #FF6F61;
  --aquatic-coral-dance-2: #FF9966;
  --aquatic-coral-dance-3: #FFCC99;
  --aquatic-coral-dance-4: #FAD7A0;
  --aquatic-coral-dance-5: #FEEBC3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aquatic-coral-dance": {
        1: "#FF6F61",
        2: "#FF9966",
        3: "#FFCC99",
        4: "#FAD7A0",
        5: "#FEEBC3",
      }
    }
  }
}

Hex values

Color 1#FF6F61

Color 2#FF9966

Color 3#FFCC99

Color 4#FAD7A0

Color 5#FEEBC3

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

2:1Fail

2.3:1Fail

1.3:1Fail

1.4:1Fail

1.5:1Fail

1.8:1Fail

1.9:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

2:1Fail

1.5:1Fail

1.1:1Fail

1.2:1Fail

2.3:1Fail

1.8:1Fail

1.2:1Fail

Similar palettes

More like Aquatic Coral Dance

Aquatic Coral Dance

See it in context.

Ready when you are.

Built with Aquatic Coral Dance.

How to use Aquatic Coral Dance

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Gentle Reef Base

Sunlit Layers

Warm Emphasis

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Aquatic Coral Dance