#80D9FF

#649EBE

#486FA2

#2C416A

Breeze Blue

Actions

Explore the gradient in different formats, and actions.

Colors overview

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#80d9ff	rgb(128, 217, 255)	hsl(200 100% 75%)	hwb(200 50% 0%)	lch(82.2 34.1 234)	lab(82.2 -20.3 -27.4)	cmyk 50%, 15%, 0%, 0%
	#649ebe	rgb(100, 158, 190)	hsl(200 41% 57%)	hwb(200 39% 25%)	lch(62.1 26.3 240)	lab(62.1 -13 -22.9)	cmyk 47%, 17%, 0%, 25%
	#486fa2	rgb(72, 111, 162)	hsl(210 38% 46%)	hwb(210 28% 36%)	lch(45.7 32.3 266)	lab(45.7 -2.3 -32.2)	cmyk 56%, 31%, 0%, 36%
	#2c416a	rgb(44, 65, 106)	hsl(220 41% 29%)	hwb(220 17% 58%)	lch(27.4 27 274)	lab(27.4 1.95 -26.9)	cmyk 58%, 39%, 0%, 58%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#80D9FF

AA - 1.58



#649EBE

AA - 2.92



#486FA2

AA - 5.15



#2C416A

AAA - 10.13



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(84.3% -0.068 -0.074), oklab(67.2% -0.046 -0.062), oklab(53.6% -0.023 -0.089), oklab(37.9% -0.01 -0.075))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #80D9FF, #649EBE, #486FA2, #2C416A)

Colors



<!-- Primary Colors -->
<color name="breeze_blue_color_10">#80D9FF</color>
<color name="breeze_blue_color_20">#649EBE</color>
<color name="breeze_blue_color_30">#486FA2</color>
<color name="breeze_blue_color_40">#2C416A</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt