Palette
Lively and warm, these colors pulse with the electric energy of a healthy, sunlit coral reef.
Preview
Interface
A quick look at how Electric Coral Glow 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 Glow' palette is lively and warm, pulsing with the electric energy of a healthy, sunlit coral reef. This cohesive collection features vibrant #FC6D5B coral, soft #FCAE91 peach, airy #FDD6B6 light beige, a deeper #D44E3D red-orange, and a soothing #F19B86 pinkish coral. It creates a harmonious yet energetic tropical feel, ideal for designs that need to convey warmth, vibrancy, and a natural, luminous beauty.
primary
Utilize #FC6D5B as the dominant vibrant coral for main calls-to-action, prominent headings, or key graphical elements that convey warmth and energy.
secondary
Employ #F19B86 for supporting backgrounds, subheadings, or to create a soft, inviting tone that complements the primary coral.
accent
Apply #D44E3D sparingly for deeper, rich accents, calls-to-action, or to add a grounding element with higher contrast.
background
Use #FDD6B6 as a light, airy base for backgrounds, or opt for white/cream to provide a fresh, clean canvas.
text
For body text, use dark brown, deep red like #D44E3D, or black for optimal readability on light backgrounds. #FC6D5B can work for larger headings.
Ideal for soft, warm backgrounds with #FDD6B6, vibrant primary content in #FC6D5B, and #D44E3D for grounding accents.
#FDD6B6 · #FC6D5B · #D44E3DCreate a smooth, warm gradient for backgrounds or large graphical elements, evoking a serene tropical sunset.
#FCAE91 · #F19B86 · #FC6D5BUse #FDD6B6 as a light base, #D44E3D for strong contrast, and #FC6D5B for vibrant highlights or energetic graphical elements.
#FDD6B6 · #D44E3D · #FC6D5B:root {
--electric-coral-glow-1: #FC6D5B;
--electric-coral-glow-2: #FCAE91;
--electric-coral-glow-3: #FDD6B6;
--electric-coral-glow-4: #D44E3D;
--electric-coral-glow-5: #F19B86;
}theme: {
extend: {
colors: {
"electric-coral-glow": {
1: "#FC6D5B",
2: "#FCAE91",
3: "#FDD6B6",
4: "#D44E3D",
5: "#F19B86",
}
}
}
}Palette colors
Accessibility
Similar palettes