Palette

Ocean Coral Garden

A dazzling array of colors found in a thriving coral reef, full of life and light.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6F61#FFD072#00A3A3#005F73#D7F7F7

Palette guide

How to use Ocean Coral Garden

Overview

The Ocean Coral Garden palette is a dazzling and vibrant collection inspired by a thriving coral reef, full of life and light. It combines the lively #FF6F61 (Coral Red) and cheerful #FFD072 (Orange Yellow) with the refreshing #00A3A3 (Teal) and deep #005F73 (Dark Teal). The bright #D7F7F7 (Light Cyan) provides a delicate, airy contrast, mimicking sparkling water. This palette is perfect for designs that aim to be energetic, playful, and visually engaging. Designers and developers can use these colors for children's products, travel promotions, or any digital experience needing a burst of joyful, marine-inspired vibrancy.

Best used for

Children's educational apps
Travel and tourism promotions
Summer-themed marketing
Creative agency portfolios
Marine conservation initiatives
Playful e-commerce sites

Suggested color roles

primary

Use #00A3A3 as a refreshing primary color for large sections, balancing the warmer tones with a cool base.

secondary

Employ #FF6F61 for secondary accents, calls-to-action, or important headers to inject energy and warmth.

accent

Apply #FFD072 for playful highlights, interactive elements, or to draw attention to specific content.

background

The light #D7F7F7 creates an airy, clean background, allowing the vibrant colors to truly pop.

text

On light backgrounds, use a dark charcoal or black. On darker palette colors like #005F73, use white or #D7F7F7 for readability.

Accessibility notes

Ensure sufficient contrast for text. Dark text on #D7F7F7 is excellent. White text on #00A3A3 or #005F73 works well.
Be cautious using #FFD072 text on #D7F7F7 backgrounds; it may lack sufficient contrast. Use it for larger headings or accents.
Prioritize #005F73 or black for body text on #D7F7F7 to meet WCAG contrast guidelines.
Use #FF6F61 and #FFD072 as accents, ensuring they have good contrast against their surrounding elements.

Recommended combinations

Vibrant Reef

Captures the lively essence of a coral reef, ideal for vibrant hero sections and engaging UI elements.

#00A3A3 · #FF6F61 · #FFD072

Deep Contrast

Provides a strong, clear contrast, perfect for dark mode elements with bright, eye-catching accents.

#005F73 · #D7F7F7 · #FF6F61

Playful Accent

A light, fresh background with a cool primary and a warm, inviting accent for interactive components.

#D7F7F7 · #00A3A3 · #FFD072

CSS variables

:root {
  --ocean-coral-garden-1: #FF6F61;
  --ocean-coral-garden-2: #FFD072;
  --ocean-coral-garden-3: #00A3A3;
  --ocean-coral-garden-4: #005F73;
  --ocean-coral-garden-5: #D7F7F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-coral-garden": {
        1: "#FF6F61",
        2: "#FFD072",
        3: "#00A3A3",
        4: "#005F73",
        5: "#D7F7F7",
      }
    }
  }
}

Hex values

Color 1#FF6F61

Color 2#FFD072

Color 3#00A3A3

Color 4#005F73

Color 5#D7F7F7

Accessibility

Contrast checker

1.9:1Fail

1.1:1Fail

2.7:1Fail

2.4:1Fail

1.9:1Fail

2.1:1Fail

5:1AA

1.3:1Fail

1.1:1Fail

2.1:1Fail

2.3:1Fail

2.7:1Fail

5:1AA

2.3:1Fail

6.4:1AA

2.4:1Fail

1.3:1Fail

2.7:1Fail

6.4:1AA

Similar palettes

More like Ocean Coral Garden

Ocean Coral Garden

See it in context.

Ready when you are.

Built with Ocean Coral Garden.

How to use Ocean Coral Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Reef

Deep Contrast

Playful Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ocean Coral Garden