#3c0a52

#d70ce0

#db9eff

Fuchsia



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
	#3c0a52	rgb(60, 10, 82)	hsl(280 78% 18%)	hwb(280 3.9% 68%)	lch(14 46 315)	lab(14 32.8 -32.3)	cmyk 27%, 88%, 0%, 68%
	#d70ce0	rgb(215, 12, 224)	hsl(300 90% 46%)	hwb(300 4.7% 12%)	lch(51.7 100 325)	lab(51.7 82.3 -57.1)	cmyk 4%, 95%, 0%, 12%
	#db9eff	rgb(219, 158, 255)	hsl(280 100% 81%)	hwb(280 62% 0%)	lch(73.8 53.5 312)	lab(73.8 36 -39.6)	cmyk 14%, 38%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#3c0a52

AAA - 15.47



#d70ce0

AA - 4.18



#db9eff

AA - 2.02



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(27.8% 0.083 -0.091), oklab(62.5% 0.238 -0.16), oklab(79.2% 0.099 -0.109))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #3c0a52, #d70ce0, #db9eff)

Colors



<!-- Primary Colors -->
<color name="fuchsia_color_10">#3c0a52</color>
<color name="fuchsia_color_20">#d70ce0</color>
<color name="fuchsia_color_30">#db9eff</color>

Gradient PRO

Pro feature only

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

PWA prompt