Spring

Actions

Explore the gradient in different formats, and actions.

Colors overview

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f5da89	rgb(245, 218, 137)	hsl(45 84% 75%)	hwb(45 54% 3.9%)	lch(88 43.4 87.5)	lab(88 1.88 43.3)	cmyk 0%, 11%, 44%, 4%
	#f0cf73	rgb(240, 207, 115)	hsl(44 81% 70%)	hwb(44 45% 5.9%)	lch(84.6 49.8 85.7)	lab(84.6 3.76 49.7)	cmyk 0%, 14%, 52%, 6%
	#f7c02a	rgb(247, 192, 42)	hsl(44 93% 57%)	hwb(44 16% 3.1%)	lch(81.1 76.1 81.5)	lab(81.1 11.2 75.3)	cmyk 0%, 22%, 83%, 3%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f5da89

AA - 1.37



#f0cf73

AA - 1.51



#f7c02a

AA - 1.67



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(89.3% -0.003 0.105), oklab(86.4% 0 0.118), oklab(83.5% 0.011 0.161))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f5da89, #f0cf73, #f7c02a)

Colors



<!-- Primary Colors -->
<color name="spring_color_10">#f5da89</color>
<color name="spring_color_20">#f0cf73</color>
<color name="spring_color_30">#f7c02a</color>

Gradient PRO

Pro feature only

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

PWA prompt