Watermelon Color Palette
Brightness
Saturation
Warmth
UI Examples
Explore beautiful UI components with Watermelon palette
Color Inspiration
Images that showcase this color palette in real designs
Download Watermelon Color Palette (PNG)
Watermelon color palette CSS
/* CSS */
.color-1 {
color: #ff6e61;
}
.color-2 {
color: #ffb84d;
}
.color-3 {
color: #ffd54d;
}
.color-4 {
color: #a4d5a6;
}
.color-5 {
color: #4eb7ac;
}
/* CSS Variables */
:root {
--color-1: #ff6e61;
--color-2: #ffb84d;
--color-3: #ffd54d;
--color-4: #a4d5a6;
--color-5: #4eb7ac;
} Watermelon background gradient CSS
/* Linear Gradient */
.linear-gradient {
background: linear-gradient(0.25turn, #ff6e61, #ffb84d, #ffd54d, #a4d5a6, #4eb7ac);
} /* Radial Gradient */
.radial-gradient {
background: radial-gradient(circle, #ff6e61, #ffb84d, #ffd54d, #a4d5a6, #4eb7ac);
} Similar color palettes
Scroll down to explore 1000+ colors.watermelon color palettes
Watermelon color palette created on .