#404040

#575757

#6E6E6E

#858585

#9C9C9C

Castle

Actions

Explore the gradient in different formats, and actions.

Colors overview

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#404040	rgb(64, 64, 64)	hsl(none 0% 25%)	hwb(none 25% 75%)	lch(27.1 0 none)	lab(27.1 0 0)	cmyk 0%, 0%, 0%, 75%
	#575757	rgb(87, 87, 87)	hsl(none 0% 34%)	hwb(none 34% 66%)	lch(37 0 none)	lab(37 0 0)	cmyk 0%, 0%, 0%, 66%
	#6e6e6e	rgb(110, 110, 110)	hsl(none 0% 43%)	hwb(none 43% 57%)	lch(46.4 0 none)	lab(46.4 0 0)	cmyk 0%, 0%, 0%, 57%
	#858585	rgb(133, 133, 133)	hsl(none 0% 52%)	hwb(none 52% 48%)	lch(55.5 0 none)	lab(55.5 0 0)	cmyk 0%, 0%, 0%, 48%
	#9c9c9c	rgb(156, 156, 156)	hsl(none 0% 61%)	hwb(none 61% 39%)	lch(64.4 0 none)	lab(64.4 0 0)	cmyk 0%, 0%, 0%, 39%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#404040

AAA - 10.36



#575757

AAA - 7.22



#6E6E6E

AA - 5.09



#858585

AA - 3.69



#9C9C9C

AA - 2.74



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(37.1% 0 0), oklab(45.7% 0 0), oklab(53.8% 0 0), oklab(61.7% 0 0), oklab(69.3% 0 0))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #404040, #575757, #6E6E6E, #858585, #9C9C9C)

Colors



<!-- Primary Colors -->
<color name="castle_color_10">#404040</color>
<color name="castle_color_20">#575757</color>
<color name="castle_color_30">#6E6E6E</color>
<color name="castle_color_40">#858585</color>
<color name="castle_color_50">#9C9C9C</color>

Gradient PRO

Pro feature only

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

PWA prompt