Banana

#525108

#7c7b0c

#a7a410

#d1ce14

#fcf818

Actions

Explore the palette in different formats, and actions.

Colors overview

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#525108	rgb(82, 81, 8)	hsl(59 82% 18%)	oklab(42% -0.03 0.08)	oklch(42% 0.09 110)	color(display-p3 0.32 0.32 0.1)
	#7c7b0c	rgb(124, 123, 12)	hsl(59 82% 27%)	oklab(57% -0.04 0.11)	oklch(57% 0.12 110)	color(display-p3 0.49 0.48 0.16)
	#a7a410	rgb(167, 164, 16)	hsl(59 83% 36%)	oklab(70% -0.05 0.14)	oklch(70% 0.15 110)	color(display-p3 0.65 0.64 0.22)
	#d1ce14	rgb(209, 206, 20)	hsl(59 83% 45%)	oklab(83% -0.06 0.17)	oklch(83% 0.18 110)	color(display-p3 0.82 0.81 0.28)
	#fcf818	rgb(252, 248, 24)	hsl(59 97% 54%)	oklab(95% -0.06 0.19)	oklch(95% 0.2 110)	color(display-p3 0.99 0.97 0.34)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#525108

AAA - 8.27



#7c7b0c

AA - 4.47



#a7a410

AA - 2.63



#d1ce14

AA - 1.67



#fcf818

AA - 1.13



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(42.2% -0.028 0.083), oklab(56.6% -0.039 0.113), oklab(69.9% -0.047 0.14), oklab(82.7% -0.056 0.167), oklab(95.1% -0.064 0.192))

Fallback colors



background: linear-gradient(45deg, #525108, #7c7b0c, #a7a410, #d1ce14, #fcf818)

Colors



<!-- Primary Colors -->
<color name="banana_color_10">#525108</color>
<color name="banana_color_20">#7c7b0c</color>
<color name="banana_color_30">#a7a410</color>
<color name="banana_color_40">#d1ce14</color>
<color name="banana_color_50">#fcf818</color>

PWA prompt