Palette

Sunken Coral Garden

Bright and energetic shades of coral and sea reflecting a lively underwater world.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunken Coral Garden 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 Sunken Coral Garden.

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

Data visualization

#FF6B6B#FFA07A#FFDAB9#87CEEB#4682B4

Palette guide

How to use Sunken Coral Garden

Overview

The "Sunken Coral Garden" palette brings a vibrant, playful energy inspired by marine life. Featuring lively coral tones like #FF6B6B and #FFA07A, it's balanced by soothing oceanic blues such as #87CEEB and the deeper #4682B4. The soft #FFDAB9 provides a gentle contrast, reminiscent of sun-drenched sand. This palette is ideal for projects aiming for a fresh, engaging, and slightly whimsical aesthetic. Designers can leverage its dynamic range to create captivating interfaces and branding that evoke warmth, wonder, and a sense of natural beauty. Developers will find these hex codes versatile for both bold statements and subtle accents.

Best used for

Children's product branding and packaging
Tropical resort websites or travel brochures
Mobile game interfaces and character design
Summer fashion collections and e-commerce sites
Eco-friendly or marine conservation campaigns
Restaurant menus with a seafood or beach theme

Suggested color roles

primary

#FF6B6B (Bright Coral) - Excellent for call-to-action buttons, main headlines, or prominent brand elements where a lively and inviting presence is desired.

secondary

#4682B4 (Steel Blue) - Use for subheadings, navigation bars, or background elements that require a stable yet oceanic feel, complementing the warmer tones.

accent

#FFA07A (Light Salmon) - Perfect for interactive elements, hover states, or small decorative details that need to pop with a friendly, warm glow.

background

#FFDAB9 (Pale Peach) - Provides a soft, warm, and inviting canvas that allows the brighter corals and deeper blues to stand out without being overwhelming.

text

For dark text, a rich charcoal or black (like #333333) works well against #FFDAB9. For light text on darker elements, pure white (#FFFFFF) is recommended.

Accessibility notes

Ensure sufficient contrast when using #FFDAB9 as a background; darker text colors (e.g., #333333 or #4682B4) will be necessary.
The vibrant #FF6B6B and #FFA07A may require careful pairing with text to meet WCAG AA standards, especially for smaller font sizes.
#4682B4 offers good contrast for white text (#FFFFFF), making it suitable for buttons or primary navigation.
Avoid placing #87CEEB text directly on #FFDAB9 backgrounds, as the contrast might be insufficient for readability.

Recommended combinations

Coral Sunset

Ideal for warm, inviting hero sections or product showcases, creating a gradient-like effect.

#FF6B6B · #FFA07A · #FFDAB9

Ocean Deep

Great for header bars, footers, or information panels where a calming yet structured feel is needed, with #FFDAB9 as a neutral base.

#4682B4 · #87CEEB · #FFDAB9

Reef Pop

Effective for eye-catching infographics or data visualization, using the coral as an accent against the blues for clarity.

#FF6B6B · #87CEEB · #4682B4

CSS variables

:root {
  --sunken-coral-garden-1: #FF6B6B;
  --sunken-coral-garden-2: #FFA07A;
  --sunken-coral-garden-3: #FFDAB9;
  --sunken-coral-garden-4: #87CEEB;
  --sunken-coral-garden-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunken-coral-garden": {
        1: "#FF6B6B",
        2: "#FFA07A",
        3: "#FFDAB9",
        4: "#87CEEB",
        5: "#4682B4",
      }
    }
  }
}

Hex values

Color 1#FF6B6B

Color 2#FFA07A

Color 3#FFDAB9

Color 4#87CEEB

Color 5#4682B4

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

1.6:1Fail

1.5:1Fail

1.4:1Fail

1.5:1Fail

1.1:1Fail

2.1:1Fail

1.5:1Fail

1.3:1Fail

3.1:1AA18

1.6:1Fail

1.1:1Fail

1.3:1Fail

2.4:1Fail

1.5:1Fail

2.1:1Fail

3.1:1AA18

2.4:1Fail

Similar palettes

More like Sunken Coral Garden

Sunken Coral Garden

See it in context.

Ready when you are.

Built with Sunken Coral Garden.

How to use Sunken Coral Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Coral Sunset

Ocean Deep

Reef Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunken Coral Garden