Mystery Color Gradient

 #325B66

 #4A7D93

 #71AAAE

 #93D4C9

 #C6E5E4

Colors overview

Blue

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#325b66	rgb(50, 91, 102)	hsl(190 34% 30%)	hwb(190 20% 60%)	lch(36 16.7 222)	lab(36 -12.5 -11.1)	cmyk 51%, 11%, 0%, 60%
	#4a7d93	rgb(74, 125, 147)	hsl(200 33% 43%)	hwb(200 29% 42%)	lch(49.5 21.9 233)	lab(49.5 -13 -17.6)	cmyk 50%, 15%, 0%, 42%
	#71aaae	rgb(113, 170, 174)	hsl(180 27% 56%)	hwb(180 44% 32%)	lch(65.8 20.4 204)	lab(65.8 -18.6 -8.33)	cmyk 35%, 2%, 0%, 32%
	#93d4c9	rgb(147, 212, 201)	hsl(170 43% 70%)	hwb(170 58% 17%)	lch(80.3 23.3 184)	lab(80.3 -23.2 -1.49)	cmyk 31%, 0%, 5%, 17%
	#c6e5e4	rgb(198, 229, 228)	hsl(180 37% 84%)	hwb(180 78% 10%)	lch(88.7 11.1 196)	lab(88.7 -10.7 -3.12)	cmyk 14%, 0%, 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.

#325B66

AAA - 7.43



#4A7D93

AA - 4.52



#71AAAE

AA - 2.6



#93D4C9

AA - 1.67



#C6E5E4

AA - 1.33



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(44.6% -0.039 -0.03), oklab(56.3% -0.044 -0.048), oklab(70% -0.056 -0.022), oklab(82.3% -0.068 -0.003), oklab(89.9% -0.032 -0.008))

Fallback colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), #325B66, #4A7D93, #71AAAE, #93D4C9, #C6E5E4)

Colors



<resources>
    <color name="mystery_100">#325B66</color>
    <color name="mystery_200">#4A7D93</color>
    <color name="mystery_300">#71AAAE</color>
    <color name="mystery_400">#93D4C9</color>
    <color name="mystery_500">#C6E5E4</color>
</resources>

Gradient PRO

Pro feature only

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

PWA prompt