Tropical Punch color palette
A fruit cup with a paper umbrella: watermelon red #FF4757, coral, mango yellow #FECA57, mint green #1DD1A1 and a bright sky blue. They're cheerful and mid-to-light, and they look friendly together because the saturation is matched. It's a lot of color, so let one or two lead and keep the rest for details. A beach bar menu or a smoothie brand's labels would carry it well.
Tropical Punch palette in use
Use white as the base with dark navy text. #FF4757 makes the primary button, #1DD1A1 marks success states, #54A0FF covers links, and #FECA57 works for highlight cards.
This pair measures 13.80:1, so it works for body text too. The button uses #FF4757 with black text.
ButtonGood for
- Beach bar menu
- Smoothie brand packaging
- Kids' game app
- Summer pop-up shop
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Tropical Punch palette as code
CSS variables
:root {
--tropical-punch-1: #FF4757;
--tropical-punch-2: #FF6348;
--tropical-punch-3: #FECA57;
--tropical-punch-4: #1DD1A1;
--tropical-punch-5: #54A0FF;
}Tailwind v4
@theme {
--color-tropical-punch-1: #FF4757;
--color-tropical-punch-2: #FF6348;
--color-tropical-punch-3: #FECA57;
--color-tropical-punch-4: #1DD1A1;
--color-tropical-punch-5: #54A0FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'tropical-punch': {
100: '#FF4757',
200: '#FF6348',
300: '#FECA57',
400: '#1DD1A1',
500: '#54A0FF',
},SCSS
$tropical-punch-1: #FF4757;
$tropical-punch-2: #FF6348;
$tropical-punch-3: #FECA57;
$tropical-punch-4: #1DD1A1;
$tropical-punch-5: #54A0FF;JSON
["#FF4757","#FF6348","#FECA57","#1DD1A1","#54A0FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.