POP

#ed397c

#f37faa

#edcd39

#7fd9f3

#39c4ed

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Pink

Yellow

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ed397c	rgb(237, 57, 124)	hsl(340 83% 58%)	oklab(64% 0.22 0.01)	oklch(64% 0.22 3.8)	color(display-p3 0.86 0.29 0.49)
	#f37faa	rgb(243, 127, 170)	hsl(340 83% 73%)	oklab(74% 0.15 -0.01)	oklch(74% 0.15 360)	color(display-p3 0.89 0.52 0.66)
	#edcd39	rgb(237, 205, 57)	hsl(49 83% 58%)	oklab(85% -0.02 0.16)	oklch(85% 0.16 96)	color(display-p3 0.91 0.81 0.34)
	#7fd9f3	rgb(127, 217, 243)	hsl(190 83% 73%)	oklab(84% -0.07 -0.06)	oklch(84% 0.09 220)	color(display-p3 0.58 0.84 0.94)
	#39c4ed	rgb(57, 196, 237)	hsl(190 83% 58%)	oklab(77% -0.09 -0.09)	oklch(77% 0.13 220)	color(display-p3 0.4 0.76 0.91)

 Click on a color value to copy it 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 color space

HDR oklab colors



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



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

Colors



<!-- Primary Colors -->
<color name="pop_color_10">#ed397c</color>
<color name="pop_color_20">#f37faa</color>
<color name="pop_color_30">#edcd39</color>
<color name="pop_color_40">#7fd9f3</color>
<color name="pop_color_50">#39c4ed</color>

PWA prompt