Grapefruit

Actions

Explore the gradient in different formats, and actions.

Pink

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#fc60a4	rgb(252, 96, 164)	hsl(330 96% 68%)	hwb(330 38% 1.2%)	lch(63.6 64.7 357)	lab(63.6 64.6 -3.93)	cmyk 0%, 62%, 35%, 1%
	#f02828	rgb(240, 40, 40)	hsl(0 87% 55%)	hwb(0 16% 5.9%)	lch(53 90.1 36.2)	lab(53 72.8 53.2)	cmyk 0%, 83%, 83%, 6%

 Click a color format to copy to your clipboard.

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

#fc60a4

AA - 2.85



#f02828

AA - 4.16



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(70.8% 0.199 -0.012), oklab(61.5% 0.205 0.107))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #fc60a4, #f02828)

Colors



<!-- Primary Colors -->
<color name="grapefruit_color_10">#fc60a4</color>
<color name="grapefruit_color_20">#f02828</color>

Gradient PRO

Pro feature only

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

PWA prompt