Palette

Coral Reef Mosaic

A dazzling array of warm coral hues, reflecting the vibrant and intricate beauty of an underwater mosaic.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0A07B#EF798A#EE586B#E24F4F#C1292A

Palette guide

How to use Coral Reef Mosaic

Overview

The Coral Reef Mosaic palette is a dazzling array of warm, interconnected hues, reflecting the intricate beauty of an underwater mosaic. This palette features a captivating gradient of coral and red tones, beginning with a soft light salmon, #F0A07B, progressing through a charming coral pink, #EF798A, and a vivid coral, #EE586B. The intensity builds with a striking tomato red, #E24F4F, and culminates in a deep, powerful dark red, #C1292A. This cohesive and energetic collection is ideal for projects that seek to convey warmth, passion, and a sophisticated vibrancy, perfect for designs requiring rich, inviting, and dynamic color stories.

Best used for

Luxury beauty and cosmetic branding
High-end fashion editorial
Restaurant and culinary branding
Art gallery and museum promotional materials
Romantic event invitations
Sophisticated web interfaces with warm tones

Suggested color roles

primary

#EE586B - Use this vivid coral for impactful calls-to-action, prominent headlines, or main brand elements to convey warmth and energy.

secondary

#F0A07B - A soft light salmon, excellent for supporting graphical elements, subheadings, or as a background for lighter, inviting sections.

accent

#C1292A - This deep dark red provides a strong, sophisticated accent, ideal for important links, hover states, or subtle borders to add gravitas.

background

#EF798A - A charming coral pink that can serve as a warm, inviting background, especially when paired with darker text for readability.

text

#C1292A - For body text, the dark red offers excellent readability against lighter backgrounds. Consider black or dark charcoal for general body text or white for text on darker elements like #EE586B.

Accessibility notes

Ensure sufficient contrast when using #F0A07B or #EF798A for text against similar light backgrounds.
#EE586B (vivid coral) and #E24F4F (tomato red) require dark text (e.g., #C1292A or black) for optimal readability.
The dark red #C1292A provides good contrast for text on #F0A07B or #EF798A.
Avoid using #F0A07B for small text on a white or very light background due to potential low contrast.

Recommended combinations

Coral Gradient

Ideal for creating smooth, warm transitions in headers or graphical elements, offering visual depth.

#EE586B · #EF798A · #F0A07B

Deep Mosaic

Effective for creating focus and intensity, using the deep red as primary with lighter coral support.

#C1292A · #E24F4F · #F0A07B

Warm Glow

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

#F0A07B · #EF798A · #EE586B

CSS variables

:root {
  --coral-reef-mosaic-1: #F0A07B;
  --coral-reef-mosaic-2: #EF798A;
  --coral-reef-mosaic-3: #EE586B;
  --coral-reef-mosaic-4: #E24F4F;
  --coral-reef-mosaic-5: #C1292A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-mosaic": {
        1: "#F0A07B",
        2: "#EF798A",
        3: "#EE586B",
        4: "#E24F4F",
        5: "#C1292A",
      }
    }
  }
}

Hex values

Color 1#F0A07B

Color 2#EF798A

Color 3#EE586B

Color 4#E24F4F

Color 5#C1292A

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

1.8:1Fail

2.8:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

2.1:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail