Berry

Actions

Explore the gradient in different formats, and actions.

Pink

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#f27474	rgb(242, 116, 116)	hsl(0 83% 70%)	hwb(0 45% 5.1%)	lch(64.4 55.1 26.2)	lab(64.4 49.4 24.4)	cmyk 0%, 52%, 52%, 5%
	#dc3545	rgb(220, 53, 69)	hsl(350 70% 54%)	hwb(350 21% 14%)	lch(50.5 72.6 27.1)	lab(50.5 64.6 33.1)	cmyk 0%, 76%, 69%, 14%

 Click a color format to copy to your clipboard.

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

#f27474

AA - 2.79



#dc3545

AA - 4.52



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.7% 0.144 0.058), oklab(59.2% 0.188 0.073))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f27474, #dc3545)

Colors



<!-- Primary Colors -->
<color name="berry_color_10">#f27474</color>
<color name="berry_color_20">#dc3545</color>

Gradient PRO

Pro feature only

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

PWA prompt