Living

#A3B18A

#D5C0A8

#F2D7D5

#F2E9E4

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Pink

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#a3b18a	rgb(163, 177, 138)	hsl(82 20% 62%)	oklab(74% -0.03 0.05)	oklch(74% 0.06 120)	color(display-p3 0.65 0.69 0.56)
	#d5c0a8	rgb(213, 192, 168)	hsl(32 35% 75%)	oklab(82% 0.01 0.04)	oklch(82% 0.04 71)	color(display-p3 0.82 0.76 0.67)
	#f2d7d5	rgb(242, 215, 213)	hsl(4.1 53% 89%)	oklab(90% 0.03 0.01)	oklch(90% 0.03 23)	color(display-p3 0.93 0.85 0.84)
	#f2e9e4	rgb(242, 233, 228)	hsl(21 35% 92%)	oklab(94% 0.01 0.01)	oklch(94% 0.01 51)	color(display-p3 0.94 0.91 0.9)

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

#A3B18A

AA - 2.27



#D5C0A8

AA - 1.75



#F2D7D5

AA - 1.35



#F2E9E4

AA - 1.19



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(73.9% -0.031 0.047), oklab(81.9% 0.013 0.038), oklab(90.1% 0.028 0.012), oklab(94% 0.007 0.009))

Fallback colors



background: linear-gradient(45deg, #A3B18A, #D5C0A8, #F2D7D5, #F2E9E4)

Colors



<!-- Primary Colors -->
<color name="living_color_10">#A3B18A</color>
<color name="living_color_20">#D5C0A8</color>
<color name="living_color_30">#F2D7D5</color>
<color name="living_color_40">#F2E9E4</color>

PWA prompt