Reflection Color Palette

#e8f2ff

#cde2fc

#aacffa

#3070bf

#1f508c

#e8f2ff

#cde2fc

#aacffa

#3070bf

#1f508c

Colors overview

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e8f2ff	rgb(232, 242, 255)	hsl(210 100% 95%)	hwb(210 91% 0%)	lch(95 7.65 258)	lab(95 -1.6 -7.48)	cmyk 9%, 5%, 0%, 0%
	#cde2fc	rgb(205, 226, 252)	hsl(210 89% 90%)	hwb(210 80% 1.2%)	lch(88.9 15.5 258)	lab(88.9 -3.24 -15.2)	cmyk 19%, 10%, 0%, 1%
	#aacffa	rgb(170, 207, 250)	hsl(210 89% 82%)	hwb(210 67% 2%)	lch(81.5 26 258)	lab(81.5 -5.22 -25.4)	cmyk 32%, 17%, 0%, 2%
	#3070bf	rgb(48, 112, 191)	hsl(210 60% 47%)	hwb(210 19% 25%)	lch(46.2 48.3 271)	lab(46.2 0.619 -48.3)	cmyk 75%, 41%, 0%, 25%
	#1f508c	rgb(31, 80, 140)	hsl(210 64% 34%)	hwb(210 12% 45%)	lch(33.2 38.8 271)	lab(33.2 0.64 -38.8)	cmyk 78%, 43%, 0%, 45%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e8f2ff

AA - 1.13



#cde2fc

AA - 1.32



#aacffa

AA - 1.61



#3070bf

AA - 5



#1f508c

AAA - 8.12



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(95.7% -0.005 -0.02), oklab(90.5% -0.012 -0.041), oklab(84.3% -0.022 -0.069), oklab(54.4% -0.035 -0.135), oklab(43.1% -0.028 -0.109))

Fallback colors



background: linear-gradient(45deg, #e8f2ff, #cde2fc, #aacffa, #3070bf, #1f508c)

Colors



<!-- Primary Colors -->
<color name="reflection_color_10">#e8f2ff</color>
<color name="reflection_color_20">#cde2fc</color>
<color name="reflection_color_30">#aacffa</color>
<color name="reflection_color_40">#3070bf</color>
<color name="reflection_color_50">#1f508c</color>

PWA prompt