#ffeaa6

#ffdf7f

#ffd861

#ffc524

Yellow Fireworks

Actions

Explore the gradient in different formats, and actions.

Colors overview

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffeaa6	rgb(255, 234, 166)	hsl(46 100% 83%)	hwb(46 65% 0%)	lch(93.3 35.8 89.4)	lab(93.3 0.37 35.8)	cmyk 0%, 8%, 35%, 0%
	#ffdf7f	rgb(255, 223, 127)	hsl(45 100% 75%)	hwb(45 50% 0%)	lch(90.1 51 86.9)	lab(90.1 2.79 50.9)	cmyk 0%, 13%, 50%, 0%
	#ffd861	rgb(255, 216, 97)	hsl(45 100% 69%)	hwb(45 38% 0%)	lch(88.1 62.4 85.8)	lab(88.1 4.55 62.2)	cmyk 0%, 15%, 62%, 0%
	#ffc524	rgb(255, 197, 36)	hsl(44 100% 57%)	hwb(44 14% 0%)	lch(83.1 79.6 81.3)	lab(83.1 12 78.7)	cmyk 0%, 23%, 86%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ffeaa6

AA - 1.19



#ffdf7f

AA - 1.3



#ffd861

AA - 1.37



#ffc524

AA - 1.58



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(93.8% -0.005 0.089), oklab(91.1% -0.003 0.121), oklab(89.3% -0.003 0.143), oklab(85.2% 0.012 0.167))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ffeaa6, #ffdf7f, #ffd861, #ffc524)

Colors



<!-- Primary Colors -->
<color name="yellow_fireworks_color_10">#ffeaa6</color>
<color name="yellow_fireworks_color_20">#ffdf7f</color>
<color name="yellow_fireworks_color_30">#ffd861</color>
<color name="yellow_fireworks_color_40">#ffc524</color>

Gradient PRO

Pro feature only

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

PWA prompt