Palette
An explosion of dazzling, almost fluorescent colors, mimicking the vibrant life of a sun-drenched coral reef.
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 dazzling, almost fluorescent colors, mimicking the vibrant life of a sun-drenched coral reef. Featuring electric #FF69B4 hot pink, brilliant #FFD700 gold, vivid #00BFFF electric blue, energetic #32CD32 lime green, and bold #FF0000 red, this scheme is a high-energy, playful collection. It's perfectly suited for designs that need to convey excitement, tropical vibrancy, or a bold, pop-art aesthetic, demanding immediate attention.
primary
Utilize #00BFFF as the dominant electric blue for main calls-to-action, prominent headings, or large graphical elements that convey freshness.
secondary
Employ #FF69B4 for strong supporting elements, subheadings, or to create a vibrant, warm contrast with the primary blue.
accent
Apply #FFD700 or #FF0000 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.
#FF69B4 · #FFD700 · #00BFFFCombine these for a high-contrast effect perfect for alerts or warnings, where #00BFFF and #32CD32 provide clear visual cues.
#00BFFF · #32CD32 · #FF0000Use for clear, impactful visuals where #FFD700 provides a luminous base with #FF69B4 adding a vibrant accent and #32CD32 a fresh touch.
#FFD700 · #FF69B4 · #32CD32:root {
--electric-coral-reef-1: #FF69B4;
--electric-coral-reef-2: #FFD700;
--electric-coral-reef-3: #00BFFF;
--electric-coral-reef-4: #32CD32;
--electric-coral-reef-5: #FF0000;
}theme: {
extend: {
colors: {
"electric-coral-reef": {
1: "#FF69B4",
2: "#FFD700",
3: "#00BFFF",
4: "#32CD32",
5: "#FF0000",
}
}
}
}Palette colors
Accessibility
Similar palettes