Waterproof Color Gradient

 #063f66

 #095a91

 #0b74bb

 #0e8fe6

Colors overview

 Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#063f66	rgb(6, 63, 102)	hsl(200 89% 21%)	hwb(200 2.4% 60%)	lch(25 28.7 260)	lab(25 -5.09 -28.2)	cmyk 94%, 38%, 0%, 60%
	#095a91	rgb(9, 90, 145)	hsl(200 88% 30%)	hwb(200 3.5% 43%)	lch(36.2 37.7 261)	lab(36.2 -5.9 -37.2)	cmyk 94%, 38%, 0%, 43%
	#0b74bb	rgb(11, 116, 187)	hsl(200 89% 39%)	hwb(200 4.3% 27%)	lch(46.5 46.1 262)	lab(46.5 -6.52 -45.7)	cmyk 94%, 38%, 0%, 27%
	#0e8fe6	rgb(14, 143, 230)	hsl(200 89% 48%)	hwb(200 5.5% 9.8%)	lch(56.7 54.2 262)	lab(56.7 -7.28 -53.7)	cmyk 94%, 38%, 0%, 10%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#063f66

AAA - 10.99



#095a91

AAA - 7.28



#0b74bb

AA - 4.96



#0e8fe6

AA - 3.44



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 space

HDR oklab colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), oklab(35.6% -0.036 -0.079), oklab(45.4% -0.045 -0.104), oklab(54.3% -0.055 -0.128), oklab(63.2% -0.063 -0.15))

Fallback colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), #063f66, #095a91, #0b74bb, #0e8fe6)

Colors



<resources>
    <color name="waterproof_100">#063f66</color>
    <color name="waterproof_200">#095a91</color>
    <color name="waterproof_300">#0b74bb</color>
    <color name="waterproof_400">#0e8fe6</color>
</resources>

Gradient PRO

Pro feature only

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

PWA prompt