Care

#344a07

#518c15

#86bd20

#f0ff6e

#b3c700

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#344a07	rgb(52, 74, 7)	hsl(80 83% 16%)	oklab(38% -0.06 0.07)	oklch(38% 0.09 130)	color(display-p3 0.22 0.29 0.08)
	#518c15	rgb(81, 140, 21)	hsl(90 74% 32%)	oklab(58% -0.11 0.11)	oklch(58% 0.16 130)	color(display-p3 0.37 0.54 0.18)
	#86bd20	rgb(134, 189, 32)	hsl(81 71% 43%)	oklab(73% -0.11 0.14)	oklch(73% 0.18 130)	color(display-p3 0.57 0.74 0.26)
	#f0ff6e	rgb(240, 255, 110)	hsl(66 100% 72%)	oklab(96% -0.07 0.15)	oklch(96% 0.17 110)	color(display-p3 0.95 1 0.52)
	#b3c700	rgb(179, 199, 0)	hsl(66 100% 39%)	oklab(79% -0.08 0.16)	oklch(79% 0.18 120)	color(display-p3 0.72 0.78 0.25)

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

#344a07

AAA - 9.86



#518c15

AA - 4.1



#86bd20

AA - 2.25



#f0ff6e

AA - 1.09



#b3c700

AA - 1.89



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(37.7% -0.056 0.074), oklab(57.7% -0.107 0.113), oklab(73.3% -0.113 0.144), oklab(96.1% -0.07 0.153), oklab(78.7% -0.082 0.162))

Fallback colors



background: linear-gradient(45deg, #344a07, #518c15, #86bd20, #f0ff6e, #b3c700)

Colors



<!-- Primary Colors -->
<color name="care_color_10">#344a07</color>
<color name="care_color_20">#518c15</color>
<color name="care_color_30">#86bd20</color>
<color name="care_color_40">#f0ff6e</color>
<color name="care_color_50">#b3c700</color>

PWA prompt