Spark

#3399FF

#66B2FF

#99CCFF

#CCEEFF

#FFFFCC

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#3399ff	rgb(51, 153, 255)	hsl(210 100% 60%)	hwb(210 20% 0%)	lch(61.3 60 268)	lab(61.3 -2.18 -60)	cmyk 80%, 40%, 0%, 0%
	#66b2ff	rgb(102, 178, 255)	hsl(210 100% 70%)	hwb(210 40% 0%)	lch(70.1 46.6 261)	lab(70.1 -7.11 -46)	cmyk 60%, 30%, 0%, 0%
	#99ccff	rgb(153, 204, 255)	hsl(210 100% 80%)	hwb(210 60% 0%)	lch(79.9 31.7 256)	lab(79.9 -7.65 -30.8)	cmyk 40%, 20%, 0%, 0%
	#cceeff	rgb(204, 238, 255)	hsl(200 100% 90%)	hwb(200 80% 0%)	lch(92 15 234)	lab(92 -8.81 -12.1)	cmyk 20%, 7%, 0%, 0%
	#ffffcc	rgb(255, 255, 204)	hsl(60 100% 90%)	hwb(60 80% 0%)	lch(99.1 25.2 104)	lab(99.1 -5.96 24.5)	cmyk 0%, 0%, 20%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#3399FF

AA - 2.94



#66B2FF

AA - 2.23



#99CCFF

AA - 1.68



#CCEEFF

AA - 1.21



#FFFFCC

AA - 1.02



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(67.6% -0.054 -0.168), oklab(74.7% -0.045 -0.127), oklab(82.8% -0.032 -0.084), oklab(93% -0.028 -0.032), oklab(98.8% -0.02 0.062))

Fallback colors



background: linear-gradient(45deg, #3399FF, #66B2FF, #99CCFF, #CCEEFF, #FFFFCC)

Colors



<!-- Primary Colors -->
<color name="spark_color_10">#3399FF</color>
<color name="spark_color_20">#66B2FF</color>
<color name="spark_color_30">#99CCFF</color>
<color name="spark_color_40">#CCEEFF</color>
<color name="spark_color_50">#FFFFCC</color>

PWA prompt