Reflection

#e8f2ff

#cde2fc

#aacffa

#3070bf

#1f508c

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#e8f2ff	rgb(232, 242, 255)	hsl(210 100% 95%)	oklab(96% -0.01 -0.02)	oklch(96% 0.02 250)	color(display-p3 0.92 0.95 0.99)
	#cde2fc	rgb(205, 226, 252)	hsl(210 89% 90%)	oklab(91% -0.01 -0.04)	oklch(91% 0.04 250)	color(display-p3 0.82 0.88 0.98)
	#aacffa	rgb(170, 207, 250)	hsl(210 89% 82%)	oklab(84% -0.02 -0.07)	oklch(84% 0.07 250)	color(display-p3 0.7 0.81 0.97)
	#3070bf	rgb(48, 112, 191)	hsl(210 60% 47%)	oklab(54% -0.04 -0.14)	oklch(54% 0.14 260)	color(display-p3 0.26 0.43 0.73)
	#1f508c	rgb(31, 80, 140)	hsl(210 64% 34%)	oklab(43% -0.03 -0.11)	oklch(43% 0.11 260)	color(display-p3 0.17 0.31 0.53)

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

#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