Marathon Color Gradient

 #391a41

 #a51957

 #f5536b

Colors overview

 Red

 Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#391a41	rgb(57, 26, 65)	hsl(290 43% 18%)	hwb(290 10% 75%)	lch(15.3 28.1 319)	lab(15.3 21.1 -18.5)	cmyk 12%, 60%, 0%, 75%
	#a51957	rgb(165, 25, 87)	hsl(330 74% 37%)	hwb(330 9.8% 35%)	lch(37.2 57.3 2.11)	lab(37.2 57.2 2.1)	cmyk 0%, 85%, 47%, 35%
	#f5536b	rgb(245, 83, 107)	hsl(350 89% 64%)	hwb(350 33% 3.9%)	lch(59.4 67.8 19.8)	lab(59.4 63.8 23)	cmyk 0%, 66%, 56%, 4%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#391a41

AAA - 15.02



#a51957

AAA - 7.3



#f5536b

AA - 3.31



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(28.1% 0.059 -0.051), oklab(47.8% 0.177 0.003), oklab(66.8% 0.19 0.053))

Fallback colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), #391a41, #a51957, #f5536b)

Colors



<resources>
    <color name="marathon_100">#391a41</color>
    <color name="marathon_200">#a51957</color>
    <color name="marathon_300">#f5536b</color>
</resources>

Gradient PRO

Pro feature only

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

PWA prompt