Melon Color Palette

#97dbad

#c3e5ad

#edd987

#f1e1a5

#f4bbbc

#97dbad

#c3e5ad

#edd987

#f1e1a5

#f4bbbc

Colors overview

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#97dbad	rgb(151, 219, 173)	hsl(140 49% 73%)	hwb(140 59% 14%)	lch(81.9 33.3 152)	lab(81.9 -29.4 15.6)	cmyk 31%, 0%, 21%, 14%
	#c3e5ad	rgb(195, 229, 173)	hsl(96 52% 79%)	hwb(96 68% 10%)	lch(87.4 30.3 129)	lab(87.4 -19 23.6)	cmyk 15%, 0%, 24%, 10%
	#edd987	rgb(237, 217, 135)	hsl(48 74% 73%)	hwb(48 53% 7.1%)	lch(87 42.9 91.3)	lab(87 -0.949 42.9)	cmyk 0%, 8%, 43%, 7%
	#f1e1a5	rgb(241, 225, 165)	hsl(47 73% 80%)	hwb(47 65% 5.5%)	lch(89.8 31.5 91.4)	lab(89.8 -0.794 31.5)	cmyk 0%, 7%, 32%, 5%
	#f4bbbc	rgb(244, 187, 188)	hsl(360 72% 85%)	hwb(360 73% 4.3%)	lch(81.2 22.7 20.3)	lab(81.2 21.3 7.87)	cmyk 0%, 23%, 23%, 4%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#97dbad

AA - 1.6



#c3e5ad

AA - 1.38



#edd987

AA - 1.41



#f1e1a5

AA - 1.3



#f4bbbc

AA - 1.65



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(83.4% -0.085 0.041), oklab(88.3% -0.057 0.06), oklab(88.4% -0.011 0.104), oklab(90.9% -0.007 0.079), oklab(84.4% 0.063 0.02))

Fallback colors



background: linear-gradient(45deg, #97dbad, #c3e5ad, #edd987, #f1e1a5, #f4bbbc)

Colors



<!-- Primary Colors -->
<color name="melon_color_10">#97dbad</color>
<color name="melon_color_20">#c3e5ad</color>
<color name="melon_color_30">#edd987</color>
<color name="melon_color_40">#f1e1a5</color>
<color name="melon_color_50">#f4bbbc</color>

PWA prompt