Cherry Blossom

#F7D9E3

#F2B8C9

#E699AC

#D97A8F

#CC5B72

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f7d9e3	rgb(247, 217, 227)	hsl(340 65% 91%)	oklab(91% 0.04 0)	oklch(91% 0.04 360)	color(display-p3 0.95 0.86 0.89)
	#f2b8c9	rgb(242, 184, 201)	hsl(340 69% 84%)	oklab(84% 0.07 0)	oklch(84% 0.07 360)	color(display-p3 0.91 0.73 0.79)
	#e699ac	rgb(230, 153, 172)	hsl(350 61% 75%)	oklab(76% 0.09 0.01)	oklch(76% 0.09 3.5)	color(display-p3 0.86 0.61 0.67)
	#d97a8f	rgb(217, 122, 143)	hsl(350 56% 66%)	oklab(69% 0.12 0.01)	oklch(69% 0.12 6.5)	color(display-p3 0.8 0.5 0.56)
	#cc5b72	rgb(204, 91, 114)	hsl(350 53% 58%)	oklab(62% 0.14 0.02)	oklch(62% 0.14 9.7)	color(display-p3 0.75 0.38 0.45)

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

#F7D9E3

AA - 1.31



#F2B8C9

AA - 1.68



#E699AC

AA - 2.2



#D97A8F

AA - 2.94



#CC5B72

AA - 3.95



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(91.3% 0.036 -0.003), oklab(84% 0.07 -0.001), oklab(76.4% 0.095 0.006), oklab(68.9% 0.119 0.014), oklab(61.8% 0.143 0.024))

Fallback colors



background: linear-gradient(45deg, #F7D9E3, #F2B8C9, #E699AC, #D97A8F, #CC5B72)

Colors



<!-- Primary Colors -->
<color name="cherry_blossom_color_10">#F7D9E3</color>
<color name="cherry_blossom_color_20">#F2B8C9</color>
<color name="cherry_blossom_color_30">#E699AC</color>
<color name="cherry_blossom_color_40">#D97A8F</color>
<color name="cherry_blossom_color_50">#CC5B72</color>

PWA prompt