#9191ff

#94ffda

#f3ffa3

Lollipop



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Blue

Yellow

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#9191ff	rgb(145, 145, 255)	hsl(240 100% 78%)	hwb(240 57% 0%)	lch(63.9 59.4 291)	lab(63.9 20.8 -55.6)	cmyk 43%, 43%, 0%, 0%
	#94ffda	rgb(148, 255, 218)	hsl(160 100% 79%)	hwb(160 58% 0%)	lch(92.8 39.4 169)	lab(92.8 -38.7 7.56)	cmyk 42%, 0%, 15%, 0%
	#f3ffa3	rgb(243, 255, 163)	hsl(68 100% 82%)	hwb(68 64% 0%)	lch(97.6 44.9 108)	lab(97.6 -14.2 42.6)	cmyk 5%, 0%, 36%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#9191ff

AA - 2.72



#94ffda

AA - 1.19



#f3ffa3

AA - 1.06



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(70.5% 0.032 -0.155), oklab(92.5% -0.111 0.021), oklab(97.1% -0.048 0.105))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #9191ff, #94ffda, #f3ffa3)

Colors



<!-- Primary Colors -->
<color name="lollipop_color_10">#9191ff</color>
<color name="lollipop_color_20">#94ffda</color>
<color name="lollipop_color_30">#f3ffa3</color>

Gradient PRO

Pro feature only

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

PWA prompt