2024 Color Gradient

 #ffcbac

 #f7b58f

 #f59e6c

Colors overview

 Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffcbac	rgb(255, 203, 172)	hsl(22 100% 84%)	hwb(22 67% 0%)	lch(85.8 27.9 55.2)	lab(85.8 15.9 22.9)	cmyk 0%, 20%, 33%, 0%
	#f7b58f	rgb(247, 181, 143)	hsl(22 87% 76%)	hwb(22 56% 3.1%)	lch(79.3 36.3 53.9)	lab(79.3 21.4 29.3)	cmyk 0%, 27%, 42%, 3%
	#f59e6c	rgb(245, 158, 108)	hsl(22 87% 69%)	hwb(22 42% 3.9%)	lch(73.4 49.9 53.4)	lab(73.4 29.8 40)	cmyk 0%, 36%, 56%, 4%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ffcbac

AA - 1.45



#f7b58f

AA - 1.75



#f59e6c

AA - 2.1



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 space

HDR oklab colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), oklab(88% 0.044 0.057), oklab(82.6% 0.058 0.072), oklab(77.6% 0.079 0.094))

Fallback colors New



--angle: 45deg; 
 background: linear-gradient(var(--angle), #ffcbac, #f7b58f, #f59e6c)

Colors



<resources>
    <color name="2024_100">#ffcbac</color>
    <color name="2024_200">#f7b58f</color>
    <color name="2024_300">#f59e6c</color>
</resources>

Gradient PRO

Pro feature only

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

PWA prompt