Palette

Coral Reef Kaleidoscope

A dazzling display of colors from a thriving coral reef, teeming with marine life and vibrant hues.

Vibrantenergetic5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B6B#48D1CC#FFEC1F#E2BBE4#1E90FF

Palette guide

How to use Coral Reef Kaleidoscope

Overview

The Coral Reef Kaleidoscope palette is a dazzling and highly energetic collection, perfect for designs that aim to capture the vibrant, multifaceted beauty of a thriving marine ecosystem. It features a bold bright coral, #FF6B6B, providing intense warmth and playfulness. This is dynamically contrasted by the refreshing medium turquoise, #48D1CC, and a brilliant bright yellow, #FFEC1F, adding a sunny, lively dimension. A soft lavender, #E2BBE4, introduces a surprising touch of whimsy, while a strong dodger blue, #1E90FF, anchors the palette with depth and clarity. This palette is ideal for projects that demand a cheerful, diverse, and visually stimulating aesthetic.

Best used for

Creative children's brands and educational apps
Art and design portfolios
Music festival or concert promotions
Playful social media campaigns
Unique e-commerce platforms for crafts
Interactive data visualizations

Suggested color roles

primary

#FF6B6B - Use this bright coral for high-impact calls-to-action, prominent headlines, or key brand elements to convey energy and playfulness.

secondary

#1E90FF - A strong dodger blue, excellent for primary navigation, section headers, or as a dominant background color for clear, structured areas.

accent

#FFEC1F - This brilliant bright yellow is perfect for highlighting key information, interactive states, or small decorative details that need to pop.

background

#E2BBE4 - A soft lavender, ideal for clean, inviting backgrounds that add a touch of whimsy and allow other colors to stand out gently.

text

#1E90FF - For body text, the dodger blue offers good readability against lighter backgrounds. Consider black or dark charcoal for general body text or white for text on #FF6B6B.

Accessibility notes

Ensure #FF6B6B and #FFEC1F have sufficient contrast with text; dark colors like black or #1E90FF are recommended.
#FFEC1F (bright yellow) is best for accents or large headings; avoid for small body text due to potential legibility issues.
The dodger blue #1E90FF provides good contrast for text on #E2BBE4 or white backgrounds.
Avoid placing #E2BBE4 text on #FFEC1F due to insufficient contrast.

Recommended combinations

Dynamic Reef

Creates a high-energy, contrasting look, ideal for bold headlines and dynamic interactive elements.

#FF6B6B · #1E90FF · #FFEC1F

Soft Shimmer

Perfect for soft, playful backgrounds with bright accents, evoking a gentle yet lively feel.

#E2BBE4 · #48D1CC · #FFEC1F

Underwater Play

Balances cool blues/turquoises with warm coral, effective for engaging UI elements and creative content.

#48D1CC · #FF6B6B · #1E90FF

CSS variables

:root {
  --coral-reef-kaleidoscope-1: #FF6B6B;
  --coral-reef-kaleidoscope-2: #48D1CC;
  --coral-reef-kaleidoscope-3: #FFEC1F;
  --coral-reef-kaleidoscope-4: #E2BBE4;
  --coral-reef-kaleidoscope-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-kaleidoscope": {
        1: "#FF6B6B",
        2: "#48D1CC",
        3: "#FFEC1F",
        4: "#E2BBE4",
        5: "#1E90FF",
      }
    }
  }
}

Hex values

Color 1#FF6B6B

Color 2#48D1CC

Color 3#FFEC1F

Color 4#E2BBE4

Color 5#1E90FF

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

1.6:1Fail

1.2:1Fail

1.5:1Fail

1.1:1Fail

1.7:1Fail

2.3:1Fail

1.5:1Fail

1.4:1Fail

2.7:1Fail

1.6:1Fail

1.1:1Fail

1.4:1Fail

1.9:1Fail

1.2:1Fail

1.7:1Fail

2.7:1Fail

1.9:1Fail

Similar palettes

More like Coral Reef Kaleidoscope

Enchanted Forest Bloom

Coral Reef Kaleidoscope

See it in context.

Ready when you are.

Built with Coral Reef Kaleidoscope.

How to use Coral Reef Kaleidoscope

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dynamic Reef

Soft Shimmer

Underwater Play

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Kaleidoscope