#fd6af8

#ff8fca

#ff83a5

Sweet



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
	#fd6af8	rgb(253, 106, 248)	hsl(300 97% 70%)	hwb(300 42% 0.78%)	lch(67.9 82.4 327)	lab(67.9 69.4 -44.4)	cmyk 0%, 58%, 2%, 1%
	#ff8fca	rgb(255, 143, 202)	hsl(330 100% 78%)	hwb(330 56% 0%)	lch(73.2 49.6 347)	lab(73.2 48.4 -11)	cmyk 0%, 44%, 21%, 0%
	#ff83a5	rgb(255, 131, 165)	hsl(340 100% 76%)	hwb(340 51% 0%)	lch(70 50.8 5.49)	lab(70 50.6 4.86)	cmyk 0%, 49%, 35%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#fd6af8

AA - 2.44



#ff8fca

AA - 2.09



#ff83a5

AA - 2.32



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(75.5% 0.205 -0.123), oklab(78.7% 0.147 -0.031), oklab(75.8% 0.153 0.011))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #fd6af8, #ff8fca, #ff83a5)

Colors



<!-- Primary Colors -->
<color name="sweet_color_10">#fd6af8</color>
<color name="sweet_color_20">#ff8fca</color>
<color name="sweet_color_30">#ff83a5</color>

Gradient PRO

Pro feature only

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

PWA prompt