Tropical Punch Color Palette
A bright tropical cocktail of vivid pink, orange, and teal.
Use as a gradient →
Colors
#FF1654
#FFB400
#00CC99
#00A8CC
#247BA0
#003554
Contrast on Light & Dark Backgrounds
| Color | Hex | On White | On Black |
|---|---|---|---|
| #FF1654 | T - | T - | |
| #FFB400 | T - | T - | |
| #00CC99 | T - | T - | |
| #00A8CC | T - | T - | |
| #247BA0 | T - | T - | |
| #003554 | T - | T - |
Each circle shows the color as text on white and black, with a simulated WCAG AA pass/fail badge. Not a guarantee of accessibility compliance.
Tropical Punch CSS Code
HEX Copy
#FF1654 #FFB400 #00CC99 #00A8CC #247BA0 #003554
RGBA Copy
rgba(255, 22, 84, 1.0) rgba(255, 180, 0, 1.0) rgba(0, 204, 153, 1.0) rgba(0, 168, 204, 1.0) rgba(36, 123, 160, 1.0) rgba(0, 53, 84, 1.0)
HSLA Copy
hsla(344, 100%, 54%, 1.0) hsla(42, 100%, 50%, 1.0) hsla(165, 100%, 40%, 1.0) hsla(191, 100%, 40%, 1.0) hsla(198, 63%, 38%, 1.0) hsla(202, 100%, 16%, 1.0)
More Color Palettes
FAQ
What colors are in the Tropical Punch palette?A bright tropical cocktail of vivid pink, orange, and teal.
How do I turn the Tropical Punch palette into a CSS gradient?
Use
background: linear-gradient(to right, #FF1654, #FFB400, #00CC99, #00A8CC, #247BA0, #003554);, or click "Use as a gradient" above to open it in the live generator.