#48226C

#8200E7

#BF3EFF

Amethyst



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

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#48226c	rgb(72, 34, 108)	hsl(270 52% 28%)	hwb(270 13% 58%)	lch(21.9 47.3 309)	lab(21.9 30 -36.6)	cmyk 33%, 69%, 0%, 58%
	#8200e7	rgb(130, 0, 231)	hsl(270 100% 45%)	hwb(270 0% 9.4%)	lch(37.5 111 310)	lab(37.5 71 -84.9)	cmyk 44%, 100%, 0%, 9%
	#bf3eff	rgb(191, 62, 255)	hsl(280 100% 62%)	hwb(280 24% 0%)	lch(53.1 102 315)	lab(53.1 71.7 -72.6)	cmyk 25%, 76%, 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.

#48226C

AAA - 12.2



#8200E7

AA - 6.76



#BF3EFF

AA - 3.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(34.5% 0.07 -0.103), oklab(50.9% 0.133 -0.239), oklab(63.6% 0.179 -0.204))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #48226C, #8200E7, #BF3EFF)

Colors



<!-- Primary Colors -->
<color name="amethyst_color_10">#48226C</color>
<color name="amethyst_color_20">#8200E7</color>
<color name="amethyst_color_30">#BF3EFF</color>

Gradient PRO

Pro feature only

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

PWA prompt