Ice Cream

#f2da6f

#fcf0e3

#fcc2f2

#fa89e7

#5a3d2b

Actions

Explore the palette in different formats, and actions.

Colors overview

White

Pink

Yellow

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f2da6f	rgb(242, 218, 111)	hsl(49 83% 69%)	oklab(89% -0.02 0.13)	oklch(89% 0.13 97)	color(display-p3 0.93 0.86 0.5)
	#fcf0e3	rgb(252, 240, 227)	hsl(31 81% 94%)	oklab(96% 0.01 0.02)	oklch(96% 0.02 70)	color(display-p3 0.98 0.94 0.9)
	#fcc2f2	rgb(252, 194, 242)	hsl(310 91% 87%)	oklab(88% 0.08 -0.04)	oklch(88% 0.09 330)	color(display-p3 0.95 0.77 0.94)
	#fa89e7	rgb(250, 137, 231)	hsl(310 92% 76%)	oklab(78% 0.16 -0.08)	oklch(78% 0.18 330)	color(display-p3 0.92 0.56 0.89)
	#5a3d2b	rgb(90, 61, 43)	hsl(23 35% 26%)	oklab(39% 0.03 0.04)	oklch(39% 0.05 53)	color(display-p3 0.34 0.24 0.18)

 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.

#f2da6f

AA - 1.39



#fcf0e3

AA - 1.12



#fcc2f2

AA - 1.48



#fa89e7

AA - 2.14



#5a3d2b

AAA - 9.82



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(88.7% -0.016 0.129), oklab(96.1% 0.007 0.02), oklab(88% 0.08 -0.042), oklab(78.3% 0.158 -0.078), oklab(38.8% 0.03 0.04))

Fallback colors



background: linear-gradient(45deg, #f2da6f, #fcf0e3, #fcc2f2, #fa89e7, #5a3d2b)

Colors



<!-- Primary Colors -->
<color name="ice_cream_color_10">#f2da6f</color>
<color name="ice_cream_color_20">#fcf0e3</color>
<color name="ice_cream_color_30">#fcc2f2</color>
<color name="ice_cream_color_40">#fa89e7</color>
<color name="ice_cream_color_50">#5a3d2b</color>

PWA prompt