Beat

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#c20d00	rgb(194, 13, 0)	hsl(4 100% 38%)	hwb(4 0% 24%)	lch(41.7 86.1 41.4)	lab(41.7 64.5 57)	cmyk 0%, 93%, 100%, 24%
	#e62222	rgb(230, 34, 34)	hsl(0 80% 52%)	hwb(0 13% 9.8%)	lch(50.5 88.8 36.8)	lab(50.5 71.2 53.2)	cmyk 0%, 85%, 85%, 10%
	#ff5959	rgb(255, 89, 89)	hsl(0 100% 67%)	hwb(0 35% 0%)	lch(61.7 73.7 29.8)	lab(61.7 63.9 36.6)	cmyk 0%, 65%, 65%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#c20d00

AA - 6.26



#e62222

AA - 4.54



#ff5959

AA - 3.07



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(51.5% 0.179 0.103), oklab(59.3% 0.2 0.105), oklab(68.7% 0.184 0.083))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c20d00, #e62222, #ff5959)

Colors



<!-- Primary Colors -->
<color name="beat_color_10">#c20d00</color>
<color name="beat_color_20">#e62222</color>
<color name="beat_color_30">#ff5959</color>

Gradient PRO

Pro feature only

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

PWA prompt