#F7D8E9

#E082C9

#562B63

Create



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

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f7d8e9	rgb(247, 216, 233)	hsl(330 66% 91%)	hwb(330 85% 3.1%)	lch(89.3 13.8 342)	lab(89.3 13.2 -4.2)	cmyk 0%, 13%, 6%, 3%
	#e082c9	rgb(224, 130, 201)	hsl(310 60% 69%)	hwb(310 51% 12%)	lch(66.6 48.8 335)	lab(66.6 44.1 -20.9)	cmyk 0%, 42%, 10%, 12%
	#562b63	rgb(86, 43, 99)	hsl(290 39% 28%)	hwb(290 17% 61%)	lch(25.4 37.4 318)	lab(25.4 27.7 -25.1)	cmyk 13%, 57%, 0%, 61%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F7D8E9

AA - 1.31



#E082C9

AA - 2.55



#562B63

AAA - 10.92



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(91.3% 0.039 -0.011), oklab(73% 0.133 -0.057), oklab(37.1% 0.077 -0.07))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F7D8E9, #E082C9, #562B63)

Colors



<!-- Primary Colors -->
<color name="create_color_10">#F7D8E9</color>
<color name="create_color_20">#E082C9</color>
<color name="create_color_30">#562B63</color>

Gradient PRO

Pro feature only

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

PWA prompt