PLAYGROUND Color Gradient

 #3135f7

 #f77676

Colors overview

Red

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#3135f7	rgb(49, 53, 247)	hsl(240 93% 58%)	hwb(240 19% 3.1%)	lch(35.7 110 298)	lab(35.7 51.8 -97.2)	cmyk 80%, 79%, 0%, 3%
	#f77676	rgb(247, 118, 118)	hsl(0 89% 72%)	hwb(0 46% 3.1%)	lch(65.6 56.2 26.3)	lab(65.6 50.4 24.9)	cmyk 0%, 52%, 52%, 3%

 Click a color format to copy to your clipboard.

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

#3135f7

AAA - 7.04



#f77676

AA - 2.68



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(49% -0.002 -0.273), oklab(71.7% 0.147 0.059))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #3135f7, #f77676)

Colors



<!-- Primary Colors -->
<color name="playground_color_10">#3135f7</color>
<color name="playground_color_20">#f77676</color>

Gradient PRO

Pro feature only

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

PWA prompt