Palette
A dazzling array of bright, exotic colors found in a thriving and luminous coral reef ecosystem.
Preview
Interface
A quick look at how Electric Coral Reef reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The 'Electric Coral Reef' palette is a dazzling array of bright, exotic colors, capturing a thriving and luminous coral reef ecosystem. Featuring vibrant #FF6B6B coral red, soft #FFA07A peach, electric #00CED1 teal, majestic #9370DB purple, and brilliant #FFD700 yellow, it's a high-energy, playful scheme. This palette is perfectly suited for designs that need to evoke tropical vibrancy, underwater wonder, or a bold, colorful aesthetic.
primary
Utilize #00CED1 as the dominant electric teal for main calls-to-action, prominent headings, or large graphical elements that convey freshness.
secondary
Employ #FF6B6B for strong supporting elements, subheadings, or to create a vibrant, warm contrast with the primary teal.
accent
Apply #FFD700 or #9370DB sparingly for high-energy highlights, glowing effects, notifications, or small details that need to pop dramatically.
background
For maximum vibrancy, use white or a very light grey. Deep navy or black can also create a dramatic, underwater contrast.
text
On light backgrounds, use black or dark grey for readability. On dark backgrounds, white or #FFD700 for impactful headlines will be highly visible.
A dynamic trio for energetic backgrounds, striking headlines, or playful animated elements in digital ads or game UI.
#FF6B6B · #00CED1 · #FFD700Combine these for a rich, high-contrast effect perfect for tropical branding, where #9370DB provides depth and #FFA07A and #00CED1 add vibrancy.
#9370DB · #FFA07A · #00CED1Use for clear, impactful visuals where #00CED1 provides a luminous base with #FFD700 adding a bright accent and #FF6B6B a vibrant touch.
#00CED1 · #FFD700 · #FF6B6B:root {
--electric-coral-reef-2-1: #FF6B6B;
--electric-coral-reef-2-2: #FFA07A;
--electric-coral-reef-2-3: #00CED1;
--electric-coral-reef-2-4: #9370DB;
--electric-coral-reef-2-5: #FFD700;
}theme: {
extend: {
colors: {
"electric-coral-reef-2": {
1: "#FF6B6B",
2: "#FFA07A",
3: "#00CED1",
4: "#9370DB",
5: "#FFD700",
}
}
}
}Palette colors
Accessibility
Similar palettes