Back to palettes

Palette

Coral Reef Garden

A lively and cheerful palette inspired by the stunning biodiversity and bright colors of a vibrant coral reef garden.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FCB9B2#FA8D79#F56F52#3CB3A0#1F8580

Palette guide

How to use Coral Reef Garden

Overview

The Coral Reef Garden palette is a lively and cheerful collection, inspired by the stunning biodiversity of a vibrant coral reef. It features a delightful gradient of warm hues, starting with a soft light coral, #FCB9B2, progressing to a inviting salmon, #FA8D79, and culminating in an energetic red-orange, #F56F52. These warm, playful tones are beautifully complemented by the refreshing cool of a sea green, #3CB3A0, and a deeper, grounding dark sea green, #1F8580. This palette is ideal for projects seeking to convey a sense of natural beauty, playfulness, and lively charm, perfect for engaging and fresh designs.

Best used for

  • Eco-friendly brand packaging
  • Children's apparel and accessories
  • Garden or floral design websites
  • Summer outdoor activity promotions
  • Natural beauty product branding
  • Casual dining establishment interiors

Suggested color roles

primary

#F56F52 - Use this energetic red-orange for main calls-to-action, key headlines, or brand elements that need to convey warmth and vitality.

secondary

#3CB3A0 - A refreshing sea green, excellent for supporting graphical elements, subheadings, or as a background for lighter, airy sections.

accent

#1F8580 - This deep sea green provides a sophisticated contrast, ideal for hover states, subtle borders, or important interactive elements.

background

#FCB9B2 - A very light coral, perfect for clean, inviting backgrounds that allow other colors to pop without overwhelming the user.

text

#1F8580 - For body text, the dark sea green offers excellent readability against lighter backgrounds. Consider dark charcoal for general body text or pure white for text on darker elements like #F56F52.

Accessibility notes

  • Ensure sufficient contrast when using #FCB9B2 or #FA8D79 for text against similar light backgrounds.
  • #F56F52 (red-orange) requires dark text (e.g., #1F8580 or black) for optimal readability.
  • The dark sea green #1F8580 provides good contrast for text on #FCB9B2 or #FA8D79.
  • Avoid placing #FCB9B2 text directly on #FA8D79 background due to low contrast.

Recommended combinations

Reef Bloom

Ideal for bright, cheerful headers or hero sections, blending warm corals with a refreshing green.

#F56F52 · #3CB3A0 · #FCB9B2

Deep Garden

Effective for creating depth and focus, using the deep green as primary with salmon support and sea green accent.

#1F8580 · #FA8D79 · #3CB3A0

Soft Current

Perfect for soft, inviting UI elements or subtle backgrounds, offering a calm and harmonious feel.

#FCB9B2 · #FA8D79 · #3CB3A0

CSS variables

:root {
  --coral-reef-garden-1: #FCB9B2;
  --coral-reef-garden-2: #FA8D79;
  --coral-reef-garden-3: #F56F52;
  --coral-reef-garden-4: #3CB3A0;
  --coral-reef-garden-5: #1F8580;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-garden": {
        1: "#FCB9B2",
        2: "#FA8D79",
        3: "#F56F52",
        4: "#3CB3A0",
        5: "#1F8580",
      }
    }
  }
}

Related searches

coral green nature paletteplayful reef colorsmarine garden color schemenatural cheerful UIsummer coral branding

Palette colors

Hex values

Color 1#FCB9B2
·
Color 2#FA8D79
·
Color 3#F56F52
·
Color 4#3CB3A0
·
Color 5#1F8580
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
1.6:1Fail
2.7:1Fail
2
1.4:1Fail
1.3:1Fail
1.1:1Fail
1.9:1Fail
3
1.7:1Fail
1.3:1Fail
1.1:1Fail
1.5:1Fail
4
1.6:1Fail
1.1:1Fail
1.1:1Fail
1.7:1Fail
5
2.7:1Fail
1.9:1Fail
1.5:1Fail
1.7:1Fail

Similar palettes

More like Coral Reef Garden

View all vibrant
Coral Reef Bloom
Mystic Coral Gardens
Ocean Coral Garden
Reef Glow Dream
Submerged Coral Grove
Sunken Coral Garden