#a10894

#9108a1

#811d9e

Berries



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
	#a10894	rgb(161, 8, 148)	hsl(310 91% 33%)	hwb(310 3.1% 37%)	lch(37.7 73.2 331)	lab(37.7 64 -35.6)	cmyk 0%, 95%, 8%, 37%
	#9108a1	rgb(145, 8, 161)	hsl(290 91% 33%)	hwb(290 3.1% 37%)	lch(35.3 78.3 323)	lab(35.3 62.3 -47.5)	cmyk 10%, 95%, 0%, 37%
	#811d9e	rgb(129, 29, 158)	hsl(290 69% 37%)	hwb(290 11% 38%)	lch(33.6 73 318)	lab(33.6 54.6 -48.5)	cmyk 18%, 82%, 0%, 38%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#a10894

AAA - 7.05



#9108a1

AAA - 7.62



#811d9e

AAA - 8.06



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(49.2% 0.193 -0.099), oklab(47.4% 0.175 -0.133), oklab(45.7% 0.146 -0.136))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #a10894, #9108a1, #811d9e)

Colors



<!-- Primary Colors -->
<color name="berries_color_10">#a10894</color>
<color name="berries_color_20">#9108a1</color>
<color name="berries_color_30">#811d9e</color>

Gradient PRO

Pro feature only

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

PWA prompt