#F9E79F

#F2D76B

#E9C536

#E1B302

Tabebuia



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
	#f9e79f	rgb(249, 231, 159)	hsl(48 88% 80%)	hwb(48 62% 2.4%)	lch(91.9 37.5 91.7)	lab(91.9 -1.09 37.4)	cmyk 0%, 7%, 36%, 2%
	#f2d76b	rgb(242, 215, 107)	hsl(48 84% 68%)	hwb(48 42% 5.1%)	lch(86.7 55.9 89.8)	lab(86.7 0.242 55.9)	cmyk 0%, 11%, 56%, 5%
	#e9c536	rgb(233, 197, 54)	hsl(48 80% 56%)	hwb(48 21% 8.6%)	lch(80.9 71 87.5)	lab(80.9 3.12 70.9)	cmyk 0%, 15%, 77%, 9%
	#e1b302	rgb(225, 179, 2)	hsl(48 98% 45%)	hwb(48 0.78% 12%)	lch(75.5 77.2 84.2)	lab(75.5 7.85 76.8)	cmyk 0%, 20%, 99%, 12%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F9E79F

AA - 1.23



#F2D76B

AA - 1.42



#E9C536

AA - 1.67



#E1B302

AA - 1.97



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.6% -0.009 0.092), oklab(88.1% -0.013 0.131), oklab(83.1% -0.011 0.155), oklab(78.6% 0 0.16))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F9E79F, #F2D76B, #E9C536, #E1B302)

Colors



<!-- Primary Colors -->
<color name="tabebuia_color_10">#F9E79F</color>
<color name="tabebuia_color_20">#F2D76B</color>
<color name="tabebuia_color_30">#E9C536</color>
<color name="tabebuia_color_40">#E1B302</color>

Gradient PRO

Pro feature only

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

PWA prompt