Fruits

#f1849d

#f8c9d4

#fef6f8

#9df184

#849df1

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Green

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f1849d	rgb(241, 132, 157)	hsl(350 80% 73%)	oklab(74% 0.13 0.01)	oklch(74% 0.14 6.3)	color(display-p3 0.89 0.54 0.62)
	#f8c9d4	rgb(248, 201, 212)	hsl(350 77% 88%)	oklab(88% 0.05 0)	oklch(88% 0.05 2.6)	color(display-p3 0.94 0.8 0.83)
	#fef6f8	rgb(254, 246, 248)	hsl(350 80% 98%)	oklab(98% 0.01 0)	oklch(98% 0.01 0.12)	color(display-p3 0.99 0.97 0.97)
	#9df184	rgb(157, 241, 132)	hsl(110 80% 73%)	oklab(88% -0.12 0.11)	oklch(88% 0.16 140)	color(display-p3 0.69 0.94 0.57)
	#849df1	rgb(132, 157, 241)	hsl(230 80% 73%)	oklab(71% 0 -0.13)	oklch(71% 0.13 270)	color(display-p3 0.54 0.61 0.92)

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

#f1849d

AA - 2.46



#f8c9d4

AA - 1.46



#fef6f8

AA - 1.06



#9df184

AA - 1.36



#849df1

AA - 2.6



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(73.9% 0.134 0.015), oklab(88% 0.055 0.003), oklab(98% 0.009 0), oklab(88% -0.124 0.108), oklab(71.2% 0.001 -0.126))

Fallback colors



background: linear-gradient(45deg, #f1849d, #f8c9d4, #fef6f8, #9df184, #849df1)

Colors



<!-- Primary Colors -->
<color name="fruits_color_10">#f1849d</color>
<color name="fruits_color_20">#f8c9d4</color>
<color name="fruits_color_30">#fef6f8</color>
<color name="fruits_color_40">#9df184</color>
<color name="fruits_color_50">#849df1</color>

PWA prompt