Rainbow 2

Actions

Explore the gradient in different formats, and actions.

Colors overview

Green

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#7dff88	rgb(125, 255, 136)	hsl(130 100% 75%)	hwb(130 49% 0%)	lch(90.7 71.5 141)	lab(90.7 -55.5 45.1)	cmyk 51%, 0%, 47%, 0%
	#616cff	rgb(97, 108, 255)	hsl(240 100% 69%)	hwb(240 38% 0%)	lch(51.2 81.9 292)	lab(51.2 30.3 -76.1)	cmyk 62%, 58%, 0%, 0%
	#f959ff	rgb(249, 89, 255)	hsl(300 100% 67%)	hwb(300 35% 0%)	lch(65.2 92.1 325)	lab(65.2 75.6 -52.6)	cmyk 2%, 65%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#7dff88

AA - 1.27



#616cff

AA - 4.11



#f959ff

AA - 2.65



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(89.9% -0.162 0.112), oklab(60.5% 0.018 -0.215), oklab(73.6% 0.22 -0.146))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #7dff88, #616cff, #f959ff)

Colors



<!-- Primary Colors -->
<color name="rainbow_2_color_10">#7dff88</color>
<color name="rainbow_2_color_20">#616cff</color>
<color name="rainbow_2_color_30">#f959ff</color>

Gradient PRO

Pro feature only

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

PWA prompt