#f0d55d

#FFD000

#FFB800

May The 4th



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
	#f0d55d	rgb(240, 213, 93)	hsl(49 83% 65%)	hwb(49 36% 5.9%)	lch(85.9 61.1 90.3)	lab(85.9 -0.318 61.1)	cmyk 0%, 11%, 61%, 6%
	#ffd000	rgb(255, 208, 0)	hsl(49 100% 50%)	hwb(49 0% 0%)	lch(85.7 85.7 85.8)	lab(85.7 6.29 85.4)	cmyk 0%, 18%, 100%, 0%
	#ffb800	rgb(255, 184, 0)	hsl(43 100% 50%)	hwb(43 0% 0%)	lch(80 83.7 77.5)	lab(80 18.1 81.8)	cmyk 0%, 28%, 100%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#f0d55d

AA - 1.46



#FFD000

AA - 1.47



#FFB800

AA - 1.73



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(87.3% -0.016 0.14), oklab(87.3% -0.007 0.178), oklab(82.7% 0.028 0.169))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #f0d55d, #FFD000, #FFB800)

Colors



<!-- Primary Colors -->
<color name="may_the_4th_color_10">#f0d55d</color>
<color name="may_the_4th_color_20">#FFD000</color>
<color name="may_the_4th_color_30">#FFB800</color>

Gradient PRO

Pro feature only

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

PWA prompt