#ffc824

#ffdc73

#ffed4d

Spring



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffc824	rgb(255, 200, 36)	hsl(45 100% 57%)	hwb(45 14% 0%)	lch(83.8 80 82.4)	lab(83.8 10.5 79.3)	cmyk 0%, 22%, 86%, 0%
	#ffdc73	rgb(255, 220, 115)	hsl(45 100% 73%)	hwb(45 45% 0%)	lch(89.2 55.6 86.4)	lab(89.2 3.53 55.5)	cmyk 0%, 14%, 55%, 0%
	#ffed4d	rgb(255, 237, 77)	hsl(54 100% 65%)	hwb(54 30% 0%)	lch(93.2 75.4 94.7)	lab(93.2 -6.22 75.2)	cmyk 0%, 7%, 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.

#ffc824

AA - 1.55



#ffdc73

AA - 1.33



#ffed4d

AA - 1.2



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.8% 0.007 0.168), oklab(90.3% -0.003 0.13), oklab(93.4% -0.038 0.168))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ffc824, #ffdc73, #ffed4d)

Colors



<!-- Primary Colors -->
<color name="spring_color_10">#ffc824</color>
<color name="spring_color_20">#ffdc73</color>
<color name="spring_color_30">#ffed4d</color>

Gradient PRO

Pro feature only

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

PWA prompt