#c7839c

#d6a2b4

#e4c0cc

#f2dfe5

Peach



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#c7839c	rgb(199, 131, 156)	hsl(340 38% 65%)	hwb(340 51% 22%)	lch(62.5 29.6 356)	lab(62.5 29.5 -2.03)	cmyk 0%, 34%, 22%, 22%
	#d6a2b4	rgb(214, 162, 180)	hsl(340 39% 74%)	hwb(340 64% 16%)	lch(72 21.9 356)	lab(72 21.8 -1.44)	cmyk 0%, 24%, 16%, 16%
	#e4c0cc	rgb(228, 192, 204)	hsl(340 40% 82%)	hwb(340 75% 11%)	lch(81.1 14.7 356)	lab(81.1 14.7 -1)	cmyk 0%, 16%, 11%, 11%
	#f2dfe5	rgb(242, 223, 229)	hsl(340 42% 91%)	hwb(340 87% 5.1%)	lch(90.5 7.5 356)	lab(90.5 7.48 -0.464)	cmyk 0%, 8%, 5%, 5%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#c7839c

AA - 2.93



#d6a2b4

AA - 2.16



#e4c0cc

AA - 1.65



#f2dfe5

AA - 1.27



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(68.7% 0.089 -0.006), oklab(76.6% 0.065 -0.004), oklab(84.2% 0.044 -0.003), oklab(92.1% 0.022 -0.001))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c7839c, #d6a2b4, #e4c0cc, #f2dfe5)

Colors



<!-- Primary Colors -->
<color name="peach_color_10">#c7839c</color>
<color name="peach_color_20">#d6a2b4</color>
<color name="peach_color_30">#e4c0cc</color>
<color name="peach_color_40">#f2dfe5</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt