#462eff

#3a26d4

#231780

Royalblue



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

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#462eff	rgb(70, 46, 255)	hsl(250 100% 59%)	hwb(250 18% 0%)	lch(36.7 116 300)	lab(36.7 58.7 -100)	cmyk 73%, 82%, 0%, 0%
	#3a26d4	rgb(58, 38, 212)	hsl(250 70% 49%)	hwb(250 15% 17%)	lch(30.2 100 300)	lab(30.2 50.5 -86.4)	cmyk 73%, 82%, 0%, 17%
	#231780	rgb(35, 23, 128)	hsl(250 70% 30%)	hwb(250 9% 50%)	lch(17 66.6 300)	lab(17 33.1 -57.7)	cmyk 73%, 82%, 0%, 50%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#462eff

AA - 6.78



#3a26d4

AAA - 8.72



#231780

AAA - 13.94



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(50.2% 0.022 -0.281), oklab(43.9% 0.02 -0.243), oklab(31.1% 0.018 -0.162))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #462eff, #3a26d4, #231780)

Colors



<!-- Primary Colors -->
<color name="royalblue_color_10">#462eff</color>
<color name="royalblue_color_20">#3a26d4</color>
<color name="royalblue_color_30">#231780</color>

Gradient PRO

Pro feature only

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

PWA prompt