Palette
Dazzling and bold, capturing the electrifying blues, yellows, and oranges of a thriving coral 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 dazzling and bold, capturing the electrifying blues, yellows, and oranges of a thriving coral ecosystem. Featuring cool #00A6B2 and #00C6B8 blues, contrasted beautifully with warm #F7B500 yellow, #F37D00 orange, and intense #EE4F00 red-orange, this scheme creates a dynamic, energetic natural feel. It's ideal for designs that need to convey eco-consciousness, tropical vibrancy, or a lively, sun-drenched aesthetic.
primary
Utilize #00C6B8 as the dominant vibrant teal for main calls-to-action, prominent headings, or large graphical elements that convey freshness.
secondary
Employ #F7B500 for strong supporting elements, subheadings, or to add a warm, inviting glow that contrasts beautifully with the cooler tones.
accent
Apply #EE4F00 sparingly for deeper, intense orange accents, calls-to-action, or to add a grounding element with higher contrast and urgency.
background
For a fresh, clean look, use white or a very light grey. Deep navy or black can create a dramatic, underwater feel.
text
On light backgrounds, use black or dark grey for readability. On dark backgrounds, white or #F7B500 for impactful headlines will be highly visible.
A dynamic trio for energetic backgrounds, striking headlines, or playful animated elements in digital ads or eco-branding.
#00C6B8 · #F7B500 · #EE4F00Create a smooth blue gradient for backgrounds or large graphical elements, with #F37D00 adding a warm, vibrant accent.
#00A6B2 · #00C6B8 · #F37D00Use #00A6B2 as a deep base, #F7B500 for luminous highlights, and #EE4F00 for impactful calls-to-action or urgent visual elements.
#00A6B2 · #F7B500 · #EE4F00:root {
--electric-coral-reef-3-1: #00A6B2;
--electric-coral-reef-3-2: #00C6B8;
--electric-coral-reef-3-3: #F7B500;
--electric-coral-reef-3-4: #F37D00;
--electric-coral-reef-3-5: #EE4F00;
}theme: {
extend: {
colors: {
"electric-coral-reef-3": {
1: "#00A6B2",
2: "#00C6B8",
3: "#F7B500",
4: "#F37D00",
5: "#EE4F00",
}
}
}
}Palette colors
Accessibility
Similar palettes