Maple

#8c443c

#e78c70

#f2a285

#d3e4df

#0ca38b

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Green

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#8c443c	rgb(140, 68, 60)	hsl(6 40% 39%)	hwb(6 24% 45%)	lch(38.3 36.5 32.8)	lab(38.3 30.7 19.8)	cmyk 0%, 51%, 57%, 45%
	#e78c70	rgb(231, 140, 112)	hsl(14 71% 67%)	hwb(14 44% 9.4%)	lch(67.7 45.2 42.3)	lab(67.7 33.5 30.4)	cmyk 0%, 39%, 52%, 9%
	#f2a285	rgb(242, 162, 133)	hsl(16 81% 74%)	hwb(16 52% 5.1%)	lch(74.2 39.6 44.7)	lab(74.2 28.2 27.9)	cmyk 0%, 33%, 45%, 5%
	#d3e4df	rgb(211, 228, 223)	hsl(160 24% 86%)	hwb(160 83% 11%)	lch(89.2 6.57 177)	lab(89.2 -6.56 0.401)	cmyk 7%, 0%, 2%, 11%
	#0ca38b	rgb(12, 163, 139)	hsl(170 86% 34%)	hwb(170 4.7% 36%)	lch(59.8 41.2 177)	lab(59.8 -41.2 1.97)	cmyk 93%, 0%, 15%, 36%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#8c443c

AA - 6.98



#e78c70

AA - 2.5



#f2a285

AA - 2.04



#d3e4df

AA - 1.31



#0ca38b

AA - 3.16



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(47.6% 0.088 0.047), oklab(72.9% 0.094 0.073), oklab(78.4% 0.079 0.068), oklab(90.5% -0.019 0.001), oklab(64.1% -0.117 0.006))

Fallback colors



background: linear-gradient(45deg, #8c443c, #e78c70, #f2a285, #d3e4df, #0ca38b)

Colors



<!-- Primary Colors -->
<color name="maple_color_10">#8c443c</color>
<color name="maple_color_20">#e78c70</color>
<color name="maple_color_30">#f2a285</color>
<color name="maple_color_40">#d3e4df</color>
<color name="maple_color_50">#0ca38b</color>

PWA prompt