#FFE81F

#d6c20f

#b5a300

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
	#ffe81f	rgb(255, 232, 31)	hsl(54 100% 56%)	hwb(54 12% 0%)	lch(91.8 86.3 93.3)	lab(91.8 -4.93 86.2)	cmyk 0%, 9%, 88%, 0%
	#d6c20f	rgb(214, 194, 15)	hsl(54 87% 45%)	hwb(54 5.9% 16%)	lch(78.3 76.8 93.1)	lab(78.3 -4.18 76.7)	cmyk 0%, 9%, 93%, 16%
	#b5a300	rgb(181, 163, 0)	hsl(54 100% 35%)	hwb(54 0% 29%)	lch(66.9 68.9 92.8)	lab(66.9 -3.33 68.9)	cmyk 0%, 10%, 100%, 29%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FFE81F

AA - 1.24



#d6c20f

AA - 1.81



#b5a300

AA - 2.55



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(92.1% -0.039 0.184), oklab(80.6% -0.034 0.163), oklab(70.9% -0.029 0.145))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FFE81F, #d6c20f, #b5a300)

Colors



<!-- Primary Colors -->
<color name="the_4th_color_10">#FFE81F</color>
<color name="the_4th_color_20">#d6c20f</color>
<color name="the_4th_color_30">#b5a300</color>

Gradient PRO

Pro feature only

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

PWA prompt