#7F9F9F

#86A9AB

#91B4B7

#9EC0C4

#ACD3D6

#B8E1E4

#C5EFEF

Crystal Wing

Actions

Explore the gradient in different formats, and actions.

Colors overview

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#7f9f9f	rgb(127, 159, 159)	hsl(180 14% 56%)	hwb(180 50% 38%)	lch(63.1 12.1 199)	lab(63.1 -11.5 -3.86)	cmyk 20%, 0%, 0%, 38%
	#86a9ab	rgb(134, 169, 171)	hsl(180 18% 60%)	hwb(180 53% 33%)	lch(66.7 13.1 203)	lab(66.7 -12 -5.19)	cmyk 22%, 1%, 0%, 33%
	#91b4b7	rgb(145, 180, 183)	hsl(180 21% 64%)	hwb(180 57% 28%)	lch(70.8 13.1 206)	lab(70.8 -11.8 -5.67)	cmyk 21%, 2%, 0%, 28%
	#9ec0c4	rgb(158, 192, 196)	hsl(190 24% 69%)	hwb(190 62% 23%)	lch(75.3 12.7 208)	lab(75.3 -11.2 -6.02)	cmyk 19%, 2%, 0%, 23%
	#acd3d6	rgb(172, 211, 214)	hsl(180 34% 76%)	hwb(180 67% 16%)	lch(81.8 14.1 205)	lab(81.8 -12.8 -5.98)	cmyk 20%, 1%, 0%, 16%
	#b8e1e4	rgb(184, 225, 228)	hsl(180 45% 81%)	hwb(180 72% 11%)	lch(86.7 14.7 205)	lab(86.7 -13.3 -6.14)	cmyk 19%, 1%, 0%, 11%
	#c5efef	rgb(197, 239, 239)	hsl(180 57% 85%)	hwb(180 77% 6.3%)	lch(91.5 14.8 199)	lab(91.5 -14 -4.74)	cmyk 18%, 0%, 0%, 6%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#7F9F9F

AA - 2.85



#86A9AB

AA - 2.53



#91B4B7

AA - 2.23



#9EC0C4

AA - 1.94



#ACD3D6

AA - 1.61



#B8E1E4

AA - 1.4



#C5EFEF

AA - 1.23



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(67.8% -0.034 -0.01), oklab(71% -0.036 -0.014), oklab(74.5% -0.035 -0.015), oklab(78.4% -0.033 -0.016), oklab(84% -0.038 -0.016), oklab(88.2% -0.04 -0.016), oklab(92.3% -0.042 -0.012))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #7F9F9F, #86A9AB, #91B4B7, #9EC0C4, #ACD3D6, #B8E1E4, #C5EFEF)

Colors



<!-- Primary Colors -->
<color name="crystal_wing_color_10">#7F9F9F</color>
<color name="crystal_wing_color_20">#86A9AB</color>
<color name="crystal_wing_color_30">#91B4B7</color>
<color name="crystal_wing_color_40">#9EC0C4</color>
<color name="crystal_wing_color_50">#ACD3D6</color>
<color name="crystal_wing_color_60">#B8E1E4</color>
<color name="crystal_wing_color_70">#C5EFEF</color>

Gradient PRO

Pro feature only

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

PWA prompt