Mango

Actions

Explore the gradient in different formats, and actions.

Yellow

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#f7b56b	rgb(247, 181, 107)	hsl(32 90% 69%)	hwb(32 42% 3.1%)	lch(78.9 50.8 68)	lab(78.9 19 47.1)	cmyk 0%, 27%, 57%, 3%
	#f27f59	rgb(242, 127, 89)	hsl(15 85% 65%)	hwb(15 35% 5.1%)	lch(66.2 59.5 44)	lab(66.2 42.9 41.3)	cmyk 0%, 48%, 63%, 5%

 Click a color format to copy to your clipboard.

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

#f7b56b

AA - 1.78



#f27f59

AA - 2.63



The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

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(82% 0.045 0.11), oklab(71.9% 0.117 0.095))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f7b56b, #f27f59)

Colors



<!-- Primary Colors -->
<color name="mango_color_10">#f7b56b</color>
<color name="mango_color_20">#f27f59</color>

Gradient PRO

Pro feature only

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

PWA prompt