Fruits

#4bb54c

#f7c3da

#ebd7bf

#eba857

#ed7371

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#4bb54c	rgb(75, 181, 76)	hsl(120 42% 50%)	oklab(69% -0.14 0.1)	oklch(69% 0.17 140)	color(display-p3 0.41 0.7 0.35)
	#f7c3da	rgb(247, 195, 218)	hsl(330 76% 87%)	oklab(87% 0.07 -0.01)	oklch(87% 0.07 350)	color(display-p3 0.94 0.77 0.85)
	#ebd7bf	rgb(235, 215, 191)	hsl(33 52% 84%)	oklab(89% 0.01 0.04)	oklch(89% 0.04 72)	color(display-p3 0.91 0.85 0.76)
	#eba857	rgb(235, 168, 87)	hsl(33 79% 63%)	oklab(78% 0.04 0.12)	oklch(78% 0.13 69)	color(display-p3 0.88 0.67 0.39)
	#ed7371	rgb(237, 115, 113)	hsl(0.97 78% 69%)	oklab(70% 0.14 0.06)	oklch(70% 0.15 23)	color(display-p3 0.87 0.48 0.46)

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

#4bb54c

AA - 2.62



#f7c3da

AA - 1.52



#ebd7bf

AA - 1.39



#eba857

AA - 2.04



#ed7371

AA - 2.88



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.8% -0.14 0.104), oklab(87% 0.065 -0.011), oklab(88.9% 0.012 0.037), oklab(78% 0.044 0.117), oklab(69.8% 0.14 0.058))

Fallback colors



background: linear-gradient(45deg, #4bb54c, #f7c3da, #ebd7bf, #eba857, #ed7371)

Colors



<!-- Primary Colors -->
<color name="fruits_color_10">#4bb54c</color>
<color name="fruits_color_20">#f7c3da</color>
<color name="fruits_color_30">#ebd7bf</color>
<color name="fruits_color_40">#eba857</color>
<color name="fruits_color_50">#ed7371</color>

PWA prompt