Toad

#3a6b55

#5fc198

#9ed5ae

#d6d3b8

#fad1c1

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#3a6b55	rgb(58, 107, 85)	hsl(150 30% 32%)	oklab(49% -0.06 0.02)	oklch(49% 0.06 160)	color(display-p3 0.27 0.41 0.34)
	#5fc198	rgb(95, 193, 152)	hsl(150 44% 56%)	oklab(74% -0.11 0.03)	oklch(74% 0.11 160)	color(display-p3 0.47 0.75 0.61)
	#9ed5ae	rgb(158, 213, 174)	hsl(140 40% 73%)	oklab(82% -0.07 0.04)	oklch(82% 0.08 150)	color(display-p3 0.66 0.83 0.69)
	#d6d3b8	rgb(214, 211, 184)	hsl(54 27% 78%)	oklab(86% -0.01 0.04)	oklch(86% 0.04 100)	color(display-p3 0.84 0.83 0.73)
	#fad1c1	rgb(250, 209, 193)	hsl(17 85% 87%)	oklab(89% 0.04 0.03)	oklch(89% 0.05 42)	color(display-p3 0.95 0.83 0.77)

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

#3a6b55

AA - 6.15



#5fc198

AA - 2.19



#9ed5ae

AA - 1.66



#d6d3b8

AA - 1.51



#fad1c1

AA - 1.4



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(48.6% -0.062 0.019), oklab(74% -0.107 0.031), oklab(82.4% -0.071 0.035), oklab(86.2% -0.008 0.036), oklab(89.2% 0.038 0.035))

Fallback colors



background: linear-gradient(45deg, #3a6b55, #5fc198, #9ed5ae, #d6d3b8, #fad1c1)

Colors



<!-- Primary Colors -->
<color name="toad_color_10">#3a6b55</color>
<color name="toad_color_20">#5fc198</color>
<color name="toad_color_30">#9ed5ae</color>
<color name="toad_color_40">#d6d3b8</color>
<color name="toad_color_50">#fad1c1</color>

PWA prompt