#5144e3

#8378f5

#ffffff

#e6b565

#e6a747

Brave

#5144e3

#8378f5

#ffffff

#e6b565

#e6a747



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

Blue

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#5144e3	rgb(81, 68, 227)	hsl(240 74% 58%)	hwb(240 27% 11%)	lch(39 91 298)	lab(39 42.4 -80.5)	cmyk 64%, 70%, 0%, 11%
	#8378f5	rgb(131, 120, 245)	hsl(250 86% 72%)	hwb(250 47% 3.9%)	lch(56.1 68.8 295)	lab(56.1 28.6 -62.5)	cmyk 47%, 51%, 0%, 4%
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	hwb(none 100% 0%)	lch(100 0 none)	lab(100 0 0)	cmyk 0%, 0%, 0%, 0%
	#e6b565	rgb(230, 181, 101)	hsl(37 72% 65%)	hwb(37 40% 9.8%)	lch(77 48.8 76.1)	lab(77 11.7 47.3)	cmyk 0%, 21%, 56%, 10%
	#e6a747	rgb(230, 167, 71)	hsl(36 76% 59%)	hwb(36 28% 9.8%)	lch(73.3 59.8 73.1)	lab(73.3 17.4 57.2)	cmyk 0%, 27%, 69%, 10%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#5144e3

AA - 6.39



#8378f5

AA - 3.51



#ffffff

AA - 1



#e6b565

AA - 1.88



#e6a747

AA - 2.1



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(50.7% 0.032 -0.227), oklab(64.3% 0.044 -0.175), oklab(100% 0 0), oklab(80.1% 0.023 0.111), oklab(77.1% 0.035 0.128))

Fallback colors



background: linear-gradient(45deg, #5144e3, #8378f5, #ffffff, #e6b565, #e6a747)

Colors



<!-- Primary Colors -->
<color name="brave_color_10">#5144e3</color>
<color name="brave_color_20">#8378f5</color>
<color name="brave_color_30">#ffffff</color>
<color name="brave_color_40">#e6b565</color>
<color name="brave_color_50">#e6a747</color>

PWA prompt