Almonds

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f4d8c2	rgb(244, 216, 194)	hsl(26 69% 86%)	hwb(26 76% 4.3%)	lch(88.3 16.5 62.7)	lab(88.3 7.54 14.6)	cmyk 0%, 11%, 20%, 4%
	#e4c8b2	rgb(228, 200, 178)	hsl(26 48% 80%)	hwb(26 70% 11%)	lch(82.6 16.7 62.6)	lab(82.6 7.69 14.9)	cmyk 0%, 12%, 22%, 11%
	#d5b7a4	rgb(213, 183, 164)	hsl(23 37% 74%)	hwb(23 64% 16%)	lch(76.7 16.5 57.2)	lab(76.7 8.96 13.9)	cmyk 0%, 14%, 23%, 16%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f4d8c2

AA - 1.35



#e4c8b2

AA - 1.59



#d5b7a4

AA - 1.88



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(90% 0.021 0.037), oklab(85.1% 0.022 0.038), oklab(80% 0.025 0.035))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f4d8c2, #e4c8b2, #d5b7a4)

Colors



<!-- Primary Colors -->
<color name="almonds_color_10">#f4d8c2</color>
<color name="almonds_color_20">#e4c8b2</color>
<color name="almonds_color_30">#d5b7a4</color>

Gradient PRO

Pro feature only

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

PWA prompt