Tomato

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff462e	rgb(255, 70, 46)	hsl(6.9 100% 59%)	hwb(6.9 18% 0%)	lch(58.8 89.4 39.1)	lab(58.8 69.3 56.4)	cmyk 0%, 73%, 82%, 0%
	#aa2f1f	rgb(170, 47, 31)	hsl(6.9 69% 39%)	hwb(6.9 12% 33%)	lch(39.7 64 38.7)	lab(39.7 50 40)	cmyk 0%, 72%, 82%, 33%
	#55170f	rgb(85, 23, 15)	hsl(6.9 70% 20%)	hwb(6.9 5.9% 67%)	lch(18.6 36.1 37.1)	lab(18.6 28.8 21.8)	cmyk 0%, 73%, 82%, 67%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ff462e

AA - 3.4



#aa2f1f

AA - 6.69



#55170f

AAA - 13.85



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(66.3% 0.193 0.115), oklab(49.3% 0.139 0.083), oklab(30.6% 0.081 0.047))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ff462e, #aa2f1f, #55170f)

Colors



<!-- Primary Colors -->
<color name="tomato_color_10">#ff462e</color>
<color name="tomato_color_20">#aa2f1f</color>
<color name="tomato_color_30">#55170f</color>

Gradient PRO

Pro feature only

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

PWA prompt