Back to palettes

Palette

Coral Garden Bloom

A lively collection of colors inspired by a thriving coral reef, teeming with bright marine life and clear waters.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B6B#FFA26B#FFD06B#6BCB77#4D9E9E

Palette guide

How to use Coral Garden Bloom

Overview

The Coral Garden Bloom palette is a lively collection of colors inspired by a thriving coral reef, teeming with bright marine life and clear waters. Featuring vibrant #FF6B6B (Bright Coral), #FFA26B (Orange Coral), and #FFD06B (Golden Coral), this palette provides designers with an energetic and inviting range. The refreshing #6BCB77 (Seafoam Green) and #4D9E9E (Teal Ocean) introduce a cool, natural contrast, ensuring versatility. Developers can leverage these hues to create user interfaces that feel lively, optimistic, and immersive, perfect for eco-tourism, children's educational content, or any project aiming for a cheerful and vibrant aesthetic. This palette is exceptionally versatile, blending warm vibrancy with refreshing coolness, ideal for creating compelling and engaging digital experiences.

Best used for

  • tropical eco-tourism branding
  • children's educational app design
  • marine biology website
  • summer event promotional materials
  • vibrant product packaging
  • aquatic-themed game UI

Suggested color roles

primary

#FF6B6B (Bright Coral) provides a strong, vibrant, and warm base, ideal for main brand elements, headers, or significant UI components.

secondary

#FFA26B (Orange Coral) offers a slightly softer, yet equally inviting complement, suitable for subheadings, secondary content blocks, or playful navigation.

accent

#FFD06B (Golden Coral) acts as a luminous highlight. Perfect for calls-to-action, interactive elements, or to draw attention to key information with a sunny glow.

background

#6BCB77 (Seafoam Green) offers a refreshing, cool background that supports content with a natural and airy feel.

text

#4D9E9E (Teal Ocean) provides deep, legible contrast against lighter colors in the palette. For darker backgrounds, consider white or a near-white.

Accessibility notes

  • Ensure #4D9E9E text has sufficient contrast against #FFD06B or #6BCB77 for optimal readability, meeting WCAG AA standards.
  • Avoid using #FF6B6B and #FFA26B for text and background combinations due to their similar luminosity, especially for small text.
  • When using #FFD06B for text, pair it with a significantly dark background to ensure legibility.
  • Check contrast ratios for all interactive elements, ensuring they are clearly distinguishable against adjacent colors.

Recommended combinations

Reef Radiance

Creates a vibrant, warm, and cheerful brand identity, excellent for playful logos and primary web sections.

#FF6B6B · #FFA26B · #FFD06B

Ocean Fresh

Ideal for refreshing backgrounds or subtle decorative elements, evoking clear waters and natural growth.

#6BCB77 · #4D9E9E · #FFA26B

Vibrant Contrast

Effective for high-impact headlines or calls-to-action against a light background, providing clear hierarchy and vibrancy.

#4D9E9E · #FFD06B · #FF6B6B

CSS variables

:root {
  --coral-garden-bloom-1: #FF6B6B;
  --coral-garden-bloom-2: #FFA26B;
  --coral-garden-bloom-3: #FFD06B;
  --coral-garden-bloom-4: #6BCB77;
  --coral-garden-bloom-5: #4D9E9E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-garden-bloom": {
        1: "#FF6B6B",
        2: "#FFA26B",
        3: "#FFD06B",
        4: "#6BCB77",
        5: "#4D9E9E",
      }
    }
  }
}

Related searches

coral reef color palettetropical vibrant schemeoceanic bright huesenergetic aquatic designcheerful marine colors

Palette colors

Hex values

Color 1#FF6B6B
·
Color 2#FFA26B
·
Color 3#FFD06B
·
Color 4#6BCB77
·
Color 5#4D9E9E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
1.4:1Fail
1.1:1Fail
2
1.4:1Fail
1.4:1Fail
1:1Fail
1.6:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2.2:1Fail
4
1.4:1Fail
1:1Fail
1.4:1Fail
1.6:1Fail
5
1.1:1Fail
1.6:1Fail
2.2:1Fail
1.6:1Fail

Similar palettes

More like Coral Garden Bloom

View all vibrant
Coral Reef Jewel
Electric Coral Reef
Reef Jewel Bloom
Tropic Coral Reef
Vibrant Coral Reef
Vibrant Reef Mosaic