Cool Color Palette

#1976d2

#2196f3

#bbdefb

#ffc107

#474646

#1976d2

#2196f3

#bbdefb

#ffc107

#474646

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#1976d2	rgb(25, 118, 210)	hsl(210 79% 46%)	hwb(210 9.8% 18%)	lch(48.4 55.7 271)	lab(48.4 0.688 -55.7)	cmyk 88%, 44%, 0%, 18%
	#2196f3	rgb(33, 150, 243)	hsl(210 90% 54%)	hwb(210 13% 4.7%)	lch(59.6 56.6 264)	lab(59.6 -5.87 -56.3)	cmyk 86%, 38%, 0%, 5%
	#bbdefb	rgb(187, 222, 251)	hsl(210 89% 86%)	hwb(210 73% 1.6%)	lch(86.6 19.6 249)	lab(86.6 -7.16 -18.2)	cmyk 25%, 12%, 0%, 2%
	#ffc107	rgb(255, 193, 7)	hsl(45 100% 51%)	hwb(45 2.7% 0%)	lch(82.1 83.6 80.6)	lab(82.1 13.7 82.4)	cmyk 0%, 24%, 97%, 0%
	#474646	rgb(71, 70, 70)	hsl(0 0.71% 28%)	hwb(0 27% 72%)	lch(29.8 0.459 19.8)	lab(29.8 0.432 0.155)	cmyk 0%, 1%, 1%, 72%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#1976d2

AA - 4.6



#2196f3

AA - 3.12



#bbdefb

AA - 1.4



#ffc107

AA - 1.63



#474646

AAA - 9.4



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(56.5% -0.047 -0.156), oklab(65.8% -0.061 -0.158), oklab(88.5% -0.024 -0.049), oklab(84.4% 0.015 0.171), oklab(39.5% 0.001 0))

Fallback colors



background: linear-gradient(45deg, #1976d2, #2196f3, #bbdefb, #ffc107, #474646)

Colors



<!-- Primary Colors -->
<color name="cool_color_10">#1976d2</color>
<color name="cool_color_20">#2196f3</color>
<color name="cool_color_30">#bbdefb</color>
<color name="cool_color_40">#ffc107</color>
<color name="cool_color_50">#474646</color>

PWA prompt