#F7E182

#F9E79A

#FBF0B3

#FDF7CC

Banana



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
	#f7e182	rgb(247, 225, 130)	hsl(49 88% 74%)	hwb(49 51% 3.1%)	lch(89.9 49 91.4)	lab(89.9 -1.16 49)	cmyk 0%, 9%, 47%, 3%
	#f9e79a	rgb(249, 231, 154)	hsl(49 89% 79%)	hwb(49 60% 2.4%)	lch(91.8 39.9 92.1)	lab(91.8 -1.49 39.8)	cmyk 0%, 7%, 38%, 2%
	#fbf0b3	rgb(251, 240, 179)	hsl(51 90% 84%)	hwb(51 70% 1.6%)	lch(94.6 31.1 95.3)	lab(94.6 -2.85 31)	cmyk 0%, 4%, 29%, 2%
	#fdf7cc	rgb(253, 247, 204)	hsl(53 92% 90%)	hwb(53 80% 0.78%)	lch(96.9 21.7 97.8)	lab(96.9 -2.95 21.5)	cmyk 0%, 2%, 19%, 1%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F7E182

AA - 1.3



#F9E79A

AA - 1.24



#FBF0B3

AA - 1.15



#FDF7CC

AA - 1.08



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(90.8% -0.014 0.117), oklab(92.5% -0.011 0.098), oklab(94.9% -0.012 0.078), oklab(97% -0.01 0.055))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F7E182, #F9E79A, #FBF0B3, #FDF7CC)

Colors



<!-- Primary Colors -->
<color name="banana_color_10">#F7E182</color>
<color name="banana_color_20">#F9E79A</color>
<color name="banana_color_30">#FBF0B3</color>
<color name="banana_color_40">#FDF7CC</color>

Gradient PRO

Pro feature only

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

PWA prompt