Palette
An explosion of exotic life beneath tropical waters, teeming with colorful fish and pulsating coral.
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 an explosion of exotic life beneath tropical waters, teeming with colorful fish and pulsating coral. The vibrant #FF6B6B coral red and #FF3E82 electric pink are balanced by the cool #1ABC9C teal, sunny #F7DC6F yellow, and grounding #2C3E50 deep blue. This scheme is ideal for designs that need to convey vibrancy, natural wonder, and a playful, energetic summer mood, perfect for tropical themes or children's media.
primary
Utilize #1ABC9C as the dominant fresh teal for main calls-to-action, prominent headings, or large graphical elements that convey natural vitality.
secondary
Employ #FF6B6B for strong supporting elements, subheadings, or to create a vibrant, warm contrast with the primary teal.
accent
Apply #F7DC6F or #FF3E82 sparingly for high-energy highlights, glowing effects, notifications, or small details that need to pop dramatically.
background
Use #2C3E50 as a deep, oceanic base for backgrounds, or opt for white for a clean, contrasting canvas.
text
On dark backgrounds like #2C3E50, white or #F7DC6F text provides excellent readability. On light backgrounds, black or dark grey is recommended.
Ideal for a dark mode UI: #2C3E50 background, #FF6B6B for primary content, and #F7DC6F for bright, urgent highlights.
#2C3E50 · #FF6B6B · #F7DC6FCombine these for a playful, high-contrast effect perfect for vibrant branding, where #1ABC9C provides freshness and #FF3E82 adds electric energy.
#1ABC9C · #FF3E82 · #F7DC6FUse #2C3E50 as a deep base, with #FF6B6B and #1ABC9C creating vibrant layers and focal points in illustrations or web design.
#FF6B6B · #1ABC9C · #2C3E50:root {
--electric-coral-reef-4-1: #FF6B6B;
--electric-coral-reef-4-2: #1ABC9C;
--electric-coral-reef-4-3: #F7DC6F;
--electric-coral-reef-4-4: #2C3E50;
--electric-coral-reef-4-5: #FF3E82;
}theme: {
extend: {
colors: {
"electric-coral-reef-4": {
1: "#FF6B6B",
2: "#1ABC9C",
3: "#F7DC6F",
4: "#2C3E50",
5: "#FF3E82",
}
}
}
}Palette colors
Accessibility
Similar palettes