#4bb54c

#f7c3da

#ebd7bf

#eba857

#ed7371

Fruits

#4bb54c

#f7c3da

#ebd7bf

#eba857

#ed7371



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Green

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#4bb54c	rgb(75, 181, 76)	hsl(120 42% 50%)	hwb(120 29% 29%)	lch(65.8 64.2 138)	lab(65.8 -47.7 43)	cmyk 59%, 0%, 58%, 29%
	#f7c3da	rgb(247, 195, 218)	hsl(330 76% 87%)	hwb(330 76% 3.1%)	lch(84 22.1 349)	lab(84 21.7 -4.03)	cmyk 0%, 21%, 12%, 3%
	#ebd7bf	rgb(235, 215, 191)	hsl(33 52% 84%)	hwb(33 75% 7.8%)	lch(87.2 15.2 73.3)	lab(87.2 4.35 14.5)	cmyk 0%, 9%, 19%, 8%
	#eba857	rgb(235, 168, 87)	hsl(33 79% 63%)	hwb(33 34% 7.8%)	lch(74.3 54.8 69)	lab(74.3 19.6 51.2)	cmyk 0%, 29%, 63%, 8%
	#ed7371	rgb(237, 115, 113)	hsl(0.97 78% 69%)	hwb(0.97 44% 7.1%)	lch(63.5 53.9 27.2)	lab(63.5 47.9 24.6)	cmyk 0%, 51%, 52%, 7%

 Click a color format to copy 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