Bread

Actions

Explore the gradient in different formats, and actions.

White

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#f1e1c2	rgb(241, 225, 194)	hsl(40 63% 85%)	hwb(40 76% 5.5%)	lch(90.2 17.4 83.2)	lab(90.2 2.05 17.3)	cmyk 0%, 7%, 20%, 5%
	#e0c48b	rgb(224, 196, 139)	hsl(40 58% 71%)	hwb(40 55% 12%)	lch(80.6 32.8 82.2)	lab(80.6 4.43 32.5)	cmyk 0%, 12%, 38%, 12%

 Click a color format to copy to your clipboard.

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

#F1E1C2

AA - 1.28



#e0c48b

AA - 1.68



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(91.5% 0.005 0.044), oklab(83.1% 0.008 0.08))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F1E1C2, #e0c48b)

Colors



<!-- Primary Colors -->
<color name="bread_color_10">#F1E1C2</color>
<color name="bread_color_20">#e0c48b</color>

Gradient PRO

Pro feature only

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

PWA prompt