#391a41

#a51957

#f5536b

Marathon



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

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 color space

HDR oklab colors



--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



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

Colors



<!-- Primary Colors -->
<color name="marathon_color_10">#391a41</color>
<color name="marathon_color_20">#a51957</color>
<color name="marathon_color_30">#f5536b</color>

Gradient PRO

Pro feature only

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

PWA prompt