Melon

Meet Melon (#FDBCB4), a soft, peachy-pink that balances warmth and brightness. Its gentle saturation gives it a light, airy quality, while its inherent luminosity provides a subtle pop, making it a noteworthy shade for any designer's palette.

What color is Melon?

What is the meaning of Melon?

How do I use Melon (#FDBCB4) in UI design?

Using Melon color codes

Melon

#FDBCB4

Access our full UI & UX library today.

What color is Melon?

What is the meaning of Melon?

How do I use Melon (#FDBCB4) in UI design?

Using Melon color codes

Melon Code Conversions

HEX

#FDBCB4

LAB

82, 22, 13

RGB

253, 188, 180

XYZ

66.7, 60.1, 51.3

HSL

7°, 95%, 85%

LCH

82, 26, 31°

HSB

7°, 29%, 99%

LUV

82, 42, 15

CMYK

0, 26, 29, 1

CMYK

0, 26, 29, 1

HWB

7°, 71%, 1%

Melon Color Harmonies

Analogous

An analogous color scheme uses colors adjacent to Melon on the color wheel, creating a palette that feels both harmonious and serene.

#FDB4D1

#FDBCB4

#FDE1B4

#FDB4D1

#FDBCB4

#FDE1B4

Complementary

Complementary colors sit on opposite ends of the color wheel. When paired with Melon, they create a visually striking combination with maximum contrast and vibrancy.

#FDBCB4

#B4F5FD

#FDBCB4

#B4F5FD

Split Complementary

For a vibrant yet balanced palette, a split complementary scheme pairs Melon with the two colors neighboring its direct opposite on the wheel.

#FDBCB4

#B4FDE1

#B4D1FD

#FDBCB4

#B4FDE1

#B4D1FD

Triadic

A triadic scheme uses three colors equally spaced on the color wheel. With Melon (#FDBCB4) as a base, this combination creates a vibrant, high-contrast palette.

#FDBCB4

#B4FDBC

#BCB4FD

#FDBCB4

#B4FDBC

#BCB4FD

Tetradic

A tetradic scheme pairs Melon with three other colors, creating two complementary sets for a vibrant and versatile palette with built-in visual tension.

#FDBCB4

#D1FDB4

#B4F5FD

#E1B4FD

#FDBCB4

#D1FDB4

#B4F5FD

#E1B4FD

Square

A square color scheme pairs Melon with three other colors, all equidistant on the color wheel, creating a vibrant and high-contrast palette.

#FDBCB4

#D1FDB4

#B4F5FD

#E1B4FD

#FDBCB4

#D1FDB4

#B4F5FD

#E1B4FD

Melon Contrast Simulation

Text Color

#

Background Color

#

13.03

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

13.03

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Melon Color Variations

Shades

By adding black to Melon, you create darker shades that introduce depth and weight.

#FDBCB4

#D9A19A

#B58681

#916B67

#6C514D

#483633

#241B1A

#000000

#FDBCB4

#D9A19A

#B58681

#916B67

#6C514D

#483633

#241B1A

#000000

Tints

By adding white to Melon, you create tints—lighter variations that introduce a sense of softness.

#FDBCB4

#FDC6BF

#FECFC9

#FED9D4

#FEE2DF

#FEECEA

#FFF5F4

#FFFFFF

#FDBCB4

#FDC6BF

#FECFC9

#FED9D4

#FEE2DF

#FEECEA

#FFF5F4

#FFFFFF

Tones

Tones of Melon are created by adding gray, resulting in softer, less saturated versions.

#FDBCB4

#EBB3AD

#D9ABA5

#C7A29E

#B69A96

#A4918F

#928987

#808080

#FDBCB4

#EBB3AD

#D9ABA5

#C7A29E

#B69A96

#A4918F

#928987

#808080

Hues

Hues are variations of Melon, sharing its base color but differing in intensity or temperature.

#FDBCB4

#FDF3B4

#D1FDB4

#B4FDCE

#B4F5FD

#B4BEFD

#E1B4FD

#FDB4E3

#FDBCB4

#FDF3B4

#D1FDB4

#B4FDCE

#B4F5FD

#B4BEFD

#E1B4FD

#FDB4E3

What Interfaces Use Colors Like Melon?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox