Sunset v2 Color Gradient

 #ff904f

 #ffc061

 #ffd54c

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff904f	rgb(255, 144, 79)	hsl(22 100% 65%)	hwb(22 31% 0%)	lch(71.4 65.7 53.3)	lab(71.4 39.3 52.7)	cmyk 0%, 44%, 69%, 0%
	#ffc061	rgb(255, 192, 97)	hsl(36 100% 69%)	hwb(36 38% 0%)	lch(82.3 58.3 73.8)	lab(82.3 16.3 56)	cmyk 0%, 25%, 62%, 0%
	#ffd54c	rgb(255, 213, 76)	hsl(46 100% 65%)	hwb(46 30% 0%)	lch(87.2 70 85.8)	lab(87.2 5.17 69.9)	cmyk 0%, 16%, 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.

#ff904f

AA - 2.24



#ffc061

AA - 1.61



#ffd54c

AA - 1.41



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(76.1% 0.102 0.118), oklab(84.7% 0.033 0.129), oklab(88.6% -0.004 0.156))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ff904f, #ffc061, #ffd54c)

Colors



<!-- Primary Colors -->
<color name="sunset_v2_color_10">#ff904f</color>
<color name="sunset_v2_color_20">#ffc061</color>
<color name="sunset_v2_color_30">#ffd54c</color>

Gradient PRO

Pro feature only

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

PWA prompt