Palm

#31b188

#7ace68

#ffc871

#ffe382

#ffeeb0

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#31b188	rgb(49, 177, 136)	hsl(160 57% 44%)	oklab(68% -0.12 0.03)	oklch(68% 0.13 170)	color(display-p3 0.35 0.68 0.54)
	#7ace68	rgb(122, 206, 104)	hsl(110 51% 61%)	oklab(77% -0.12 0.1)	oklch(77% 0.16 140)	color(display-p3 0.56 0.8 0.45)
	#ffc871	rgb(255, 200, 113)	hsl(37 100% 72%)	oklab(86% 0.03 0.12)	oklch(86% 0.12 77)	color(display-p3 0.97 0.79 0.49)
	#ffe382	rgb(255, 227, 130)	hsl(47 100% 75%)	oklab(92% -0.01 0.12)	oklch(92% 0.12 94)	color(display-p3 0.98 0.89 0.56)
	#ffeeb0	rgb(255, 238, 176)	hsl(47 100% 85%)	oklab(95% -0.01 0.08)	oklch(95% 0.08 95)	color(display-p3 0.99 0.94 0.72)

 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.

#31b188

AA - 2.7



#7ace68

AA - 1.93



#ffc871

AA - 1.52



#ffe382

AA - 1.26



#ffeeb0

AA - 1.15



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(68.2% -0.122 0.029), oklab(77.4% -0.123 0.103), oklab(86.4% 0.027 0.119), oklab(91.9% -0.008 0.121), oklab(94.8% -0.006 0.081))

Fallback colors



background: linear-gradient(45deg, #31b188, #7ace68, #ffc871, #ffe382, #ffeeb0)

Colors



<!-- Primary Colors -->
<color name="palm_color_10">#31b188</color>
<color name="palm_color_20">#7ace68</color>
<color name="palm_color_30">#ffc871</color>
<color name="palm_color_40">#ffe382</color>
<color name="palm_color_50">#ffeeb0</color>

PWA prompt