Lighthearted

Actions

Explore the gradient in different formats, and actions.

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#9c39a1	rgb(156, 57, 161)	hsl(300 48% 43%)	hwb(300 22% 37%)	lch(42 63.4 325)	lab(42 51.7 -36.7)	cmyk 3%, 65%, 0%, 37%
	#b55bba	rgb(181, 91, 186)	hsl(300 41% 54%)	hwb(300 36% 27%)	lch(52.7 58.4 324)	lab(52.7 47.2 -34.3)	cmyk 3%, 51%, 0%, 27%

 Click a color format to copy to your clipboard.

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

#9c39a1

AA - 5.97



#b55bba

AA - 4.06



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(52.4% 0.15 -0.102), oklab(61.4% 0.137 -0.095))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #9c39a1, #b55bba)

Colors



<!-- Primary Colors -->
<color name="lighthearted_color_10">#9c39a1</color>
<color name="lighthearted_color_20">#b55bba</color>

Gradient PRO

Pro feature only

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

PWA prompt