Watermelon is a vibrant, cheerful blend of pink and green. It sits between red and pink on the color wheel. Imagine the juicy pink of its flesh and the fresh green of its rind. Related shades include coral and mint. Use watermelon for a fun, lively touch in summer designs.
Watermelon is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #FC6C85
- RGB value: 98.8% red, 42.4% green, 52.2% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Watermelon, consider:
- coral (#ff8559): Shares watermelon’s warmth and tropical vibes with its soft, reddish-orange hue.
- blush pink (#ff7782): Echoes watermelon’s playful pink tones with a gentle, rosy shade.
- light pink (#ffb5c0): Captures watermelon’s lighthearted essence in a fresh, airy pink.
- vermilion (#e73121): Offers a bolder, reddish hue reminiscent of watermelon’s vibrant energy.
To complement Watermelon, consider pairing it with:
- Mint Green (#ADEBB3): Mint green's soft, cool tones balance Watermelon's vibrancy, creating a refreshing, lively combination.
- Coral (#FF8559): Coral shares Watermelon's energy but offers a slightly warmer hue, adding depth and harmony to your color palette.
- Sky Blue (#82C8E5): Sky blue introduces a calming and serene backdrop, allowing Watermelon's lively hue to stand out without overwhelming the senses.
- Cream (#FDFBD4): Cream's neutral softness provides a subtle contrast, highlighting Watermelon's boldness while ensuring a cohesive look.
While watermelon is bright and refreshing, it may clash with:
- Neon Green (#2CFF05): Neon green's high saturation and brightness can overwhelm watermelon, creating a harsh visual effect.
- Yellow-Green (#CCFF00): The sharp vibrancy of yellow-green can overshadow watermelon's softer tones, resulting in a discordant palette.
- Bright Yellow (#FFED29): The intense saturation of bright yellow competes with watermelon's vividness, making both colors visually overpowering.
- Cyan (#00FFFF): Cyan's cool tone contrasts starkly with watermelon's warm hue, leading to an unsettled color combination.
- Aqua (#00FFF0): Aqua’s brightness can clash with watermelon's natural warmth, creating a visually jarring effect.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Petal Sizzle
Tropic Bubblegum
Punchy Zen
Contrast checker
Contrast 2.75
- Large Text
#FC6C85
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 7.62
- Large Text
#FC6C85
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FC6C85, known as Watermelon, has RGB values of R:252, G:108, B:133 and CMYK values of C:0, M:57, Y:47, K:1.
| VALUE | CSS | |
|---|---|---|
| HEX | #FC6C85 | #FC6C85 |
| RGB DECIMAL | 252, 108, 133 | RGB(252,108,133) |
| RGB PERCENTAGE | 98.8, 42.4, 52.2 | RGB(98.8%,42.4%,52.2%) |
| CMYK | 0, 57, 47, 1 | |
| HSL | HSL(349.6, 96.0%, 70.6%) | HSL(349.6, 96.0%, 70.6%) |
| HSV (OR HSB) | 349.6°, 57.1, 98.8 | |
| WEB SAFE | #255102153 | #255102153 |
| BINARY | 11111100, 01101100, 10000101 | |
| iOS - SwiftUI | Color(red: 0.988, green: 0.424, blue: 0.522) | |
| iOS - UIKit | UIColor(red: 0.988, green: 0.424, blue: 0.522, alpha: 1) | |
| Android - Compose | Color(0xFFFC6C85) |
