#f7c965

#eaad26

#f29e50

#ff7f4d

Sunny

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f7c965	rgb(247, 201, 101)	hsl(41 90% 68%)	hwb(41 40% 3.1%)	lch(83.6 56.1 81)	lab(83.6 8.78 55.4)	cmyk 0%, 19%, 59%, 3%
	#eaad26	rgb(234, 173, 38)	hsl(41 82% 53%)	hwb(41 15% 8.2%)	lch(75.1 72.5 78)	lab(75.1 15.1 70.9)	cmyk 0%, 26%, 84%, 8%
	#f29e50	rgb(242, 158, 80)	hsl(29 86% 63%)	hwb(29 31% 5.1%)	lch(72.7 59.6 62.9)	lab(72.7 27.2 53.1)	cmyk 0%, 35%, 67%, 5%
	#ff7f4d	rgb(255, 127, 77)	hsl(17 100% 65%)	hwb(17 30% 0%)	lch(68 68.9 46.6)	lab(68 47.3 50.1)	cmyk 0%, 50%, 70%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f7c965

AA - 1.55



#eaad26

AA - 1.99



#f29e50

AA - 2.14



#ff7f4d

AA - 2.5



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(85.7% 0.012 0.128), oklab(78.5% 0.023 0.151), oklab(76.9% 0.066 0.12), oklab(73.5% 0.127 0.111))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f7c965, #eaad26, #f29e50, #ff7f4d)

Colors



<!-- Primary Colors -->
<color name="sunny_color_10">#f7c965</color>
<color name="sunny_color_20">#eaad26</color>
<color name="sunny_color_30">#f29e50</color>
<color name="sunny_color_40">#ff7f4d</color>

Gradient PRO

Pro feature only

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

PWA prompt