Melon Color Palette

Actions

Explore the palette in different formats, and actions.

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#97dbad	rgb(151, 219, 173)	hsl(140 49% 73%)	oklab(83% -0.08 0.04)	oklch(83% 0.09 150)	color(display-p3 0.65 0.85 0.69)
	#c3e5ad	rgb(195, 229, 173)	hsl(96 52% 79%)	oklab(88% -0.06 0.06)	oklch(88% 0.08 130)	color(display-p3 0.79 0.89 0.7)
	#edd987	rgb(237, 217, 135)	hsl(48 74% 73%)	oklab(88% -0.01 0.1)	oklch(88% 0.1 96)	color(display-p3 0.92 0.85 0.57)
	#f1e1a5	rgb(241, 225, 165)	hsl(47 73% 80%)	oklab(91% -0.01 0.08)	oklch(91% 0.08 95)	color(display-p3 0.93 0.88 0.67)
	#f4bbbc	rgb(244, 187, 188)	hsl(360 72% 85%)	oklab(84% 0.06 0.02)	oklch(84% 0.07 17)	color(display-p3 0.92 0.74 0.74)

 Click on a color value to copy it to your clipboard.

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



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

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

Preview the gradient in different UI components.