POP Color Palette

#ed397c

#f37faa

#edcd39

#7fd9f3

#39c4ed

#ed397c

#f37faa

#edcd39

#7fd9f3

#39c4ed

Colors overview

 Red

 Pink

 Yellow

 Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ed397c	rgb(237, 57, 124)	hsl(340 83% 58%)	hwb(340 22% 7.1%)	lch(55.1 71.2 5.52)	lab(55.1 70.8 6.85)	cmyk 0%, 76%, 48%, 7%
	#f37faa	rgb(243, 127, 170)	hsl(340 83% 73%)	hwb(340 50% 4.7%)	lch(67.7 48.8 358)	lab(67.7 48.7 -1.53)	cmyk 0%, 48%, 30%, 5%
	#edcd39	rgb(237, 205, 57)	hsl(49 83% 58%)	hwb(49 22% 7.1%)	lch(83.4 72.3 89.2)	lab(83.4 0.978 72.3)	cmyk 0%, 14%, 76%, 7%
	#7fd9f3	rgb(127, 217, 243)	hsl(190 83% 73%)	hwb(190 50% 4.7%)	lch(81.8 31.6 223)	lab(81.8 -23 -21.7)	cmyk 48%, 11%, 0%, 5%
	#39c4ed	rgb(57, 196, 237)	hsl(190 83% 58%)	hwb(190 22% 7.1%)	lch(73.3 42 229)	lab(73.3 -27.7 -31.6)	cmyk 76%, 17%, 0%, 7%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ed397c

AA - 3.83



#f37faa

AA - 2.49



#edcd39

AA - 1.56



#7fd9f3

AA - 1.6



#39c4ed

AA - 2.04



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 space

HDR oklab colors New



background: linear-gradient(45deg, oklab(63.6% 0.218 0.014), oklab(73.8% 0.149 -0.006), oklab(85.1% -0.017 0.158), oklab(83.8% -0.073 -0.058), oklab(76.5% -0.094 -0.086))

Fallback colors New



background: linear-gradient(45deg, #ed397c, #f37faa, #edcd39, #7fd9f3, #39c4ed)

Colors



<resources>
    <color name="pop_100">#ed397c</color>
    <color name="pop_200">#f37faa</color>
    <color name="pop_300">#edcd39</color>
    <color name="pop_400">#7fd9f3</color>
    <color name="pop_500">#39c4ed</color>
</resources>

PWA prompt