Melon is a light, cheerful color blending pink and orange hues. It sits between orange and pink on the color wheel, offering a soft, refreshing vibe. Shades akin to peach and cantaloupe fit in this range. Use melon in designs for a fresh and friendly feel.
Melon is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #FDBCB4
- RGB value: 99.2% red, 73.7% green, 70.6% 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 Melon, consider:
- Apricot (#ffb27f): Soft and warm, apricot offers a sunset-like hue that captures melon’s gentle, peachy undertones.
- Peach (#ffd3ac): With its light, creamy shade, peach reflects the mellow, soothing quality of melon’s color palette.
- Pastel orange (#ffc067): This soft and muted orange shares melon’s delicate warmth, echoing its subtle vibrancy.
- Light orange (#ffdbbb): Light orange delivers a faint, sunlit glow, reflecting melon’s freshness and gentle brightness.
To complement Melon, consider pairing it with:
- Teal (#069494): This color provides a cool contrast to Melon, introducing a calming yet dynamic balance.
- Forest Green (#2e6f40): The deep, earthy tones of forest green ground Melon’s lightness, creating a harmonious natural palette.
- Peach (#ffd3ac): A soft, light hue that complements melon’s vibrant nature while maintaining a serene atmosphere.
- Lilac (#a47dab): This gentle purple introduces a soft, whimsical touch that pairs well with Melon's playful energy.
While Melon is a soft and peachy hue, it may clash with:
- Chili Red (#cd1c18): The intense warmth of chili red can overwhelm Melon's gentle tone, creating an unbalanced pairing.
- Neon Pink (#ff13f0): Neon pink's high energy and brightness can clash with Melon's softness, leading to an overpowering combination.
- Mint Green (#adebb3): Mint green may contrast too starkly with Melon, resulting in a pairing that feels visually disjointed.
- Royal Blue (#305cde): The deep and cool nature of royal blue can starkly contrast with Melon's warm and light quality, creating a lack of harmony.
- Bright Yellow (#ffed29): Bright yellow’s vibrancy can clash with Melon's subtlety, resulting in a combination that's too intense and lacks subtlety.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Cinnamon Cream
Coral Surf
Coral Breeze
Contrast checker
Contrast 1.61
- Large Text
#FDBCB4
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 13.03
- Large Text
#FDBCB4
- 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 #FDBCB4, known as Melon, has RGB values of R:253, G:188, B:180 and CMYK values of C:0, M:26, Y:29, K:1.
| VALUE | CSS | |
|---|---|---|
| HEX | #FDBCB4 | #FDBCB4 |
| RGB DECIMAL | 253, 188, 180 | RGB(253,188,180) |
| RGB PERCENTAGE | 99.2, 73.7, 70.6 | RGB(99.2%,73.7%,70.6%) |
| CMYK | 0, 26, 29, 1 | |
| HSL | HSL(6.6, 94.8%, 84.9%) | HSL(6.6, 94.8%, 84.9%) |
| HSV (OR HSB) | 6.6°, 28.9, 99.2 | |
| WEB SAFE | #255204204 | #255204204 |
| BINARY | 11111101, 10111100, 10110100 | |
| iOS - SwiftUI | Color(red: 0.992, green: 0.737, blue: 0.706) | |
| iOS - UIKit | UIColor(red: 0.992, green: 0.737, blue: 0.706, alpha: 1) | |
| Android - Compose | Color(0xFFFDBCB4) |
