#5500f2

#3800b0

#bb86dc

#fcfcfc

#e0e0e0

UI 4

#5500f2

#3800b0

#bb86dc

#fcfcfc

#e0e0e0



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Purple

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#5500f2	rgb(85, 0, 242)	hsl(260 100% 47%)	hwb(260 0% 5.1%)	lch(32.7 121 305)	lab(32.7 68.6 -99.3)	cmyk 65%, 100%, 0%, 5%
	#3800b0	rgb(56, 0, 176)	hsl(260 100% 35%)	hwb(260 0% 31%)	lch(22 95.5 304)	lab(22 53.8 -78.9)	cmyk 68%, 100%, 0%, 31%
	#bb86dc	rgb(187, 134, 220)	hsl(280 55% 69%)	hwb(280 53% 14%)	lch(63.7 48.7 312)	lab(63.7 32.5 -36.3)	cmyk 15%, 39%, 0%, 14%
	#fcfcfc	rgb(252, 252, 252)	hsl(none 0% 99%)	hwb(none 99% 1.2%)	lch(99 0 none)	lab(99 0 0)	cmyk 0%, 0%, 0%, 1%
	#e0e0e0	rgb(224, 224, 224)	hsl(none 0% 88%)	hwb(none 88% 12%)	lch(89.2 0 none)	lab(89.2 0 0)	cmyk 0%, 0%, 0%, 12%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#5500f2

AAA - 7.86



#3800b0

AAA - 11.69



#bb86dc

AA - 2.77



#fcfcfc

AA - 1.02



#e0e0e0

AA - 1.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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(47.4% 0.057 -0.278), oklab(37% 0.039 -0.221), oklab(70.4% 0.089 -0.1), oklab(99.1% 0 0), oklab(90.7% 0 0))

Fallback colors



background: linear-gradient(45deg, #5500f2, #3800b0, #bb86dc, #fcfcfc, #e0e0e0)

Colors



<!-- Primary Colors -->
<color name="ui_4_color_10">#5500f2</color>
<color name="ui_4_color_20">#3800b0</color>
<color name="ui_4_color_30">#bb86dc</color>
<color name="ui_4_color_40">#fcfcfc</color>
<color name="ui_4_color_50">#e0e0e0</color>

PWA prompt