Midnight Color Gradient

 #261260

 #342079

 #422ea8

 #503cb7

Colors overview

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#261260	rgb(38, 18, 96)	hsl(260 68% 22%)	hwb(260 7.1% 62%)	lch(13.1 51.4 302)	lab(13.1 27.5 -43.4)	cmyk 60%, 81%, 0%, 62%
	#342079	rgb(52, 32, 121)	hsl(250 58% 30%)	hwb(250 13% 53%)	lch(19.9 56.5 301)	lab(19.9 29.1 -48.4)	cmyk 57%, 74%, 0%, 53%
	#422ea8	rgb(66, 46, 168)	hsl(250 57% 42%)	hwb(250 18% 34%)	lch(28.2 73.4 300)	lab(28.2 36.4 -63.7)	cmyk 61%, 73%, 0%, 34%
	#503cb7	rgb(80, 60, 183)	hsl(250 51% 48%)	hwb(250 24% 28%)	lch(33.8 72.7 299)	lab(33.8 35.2 -63.6)	cmyk 56%, 67%, 0%, 28%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#261260

AAA - 15.69



#342079

AAA - 12.89



#422ea8

AAA - 9.59



#503cb7

AAA - 7.86



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(27.1% 0.035 -0.122), oklab(33.1% 0.039 -0.137), oklab(40.9% 0.038 -0.18), oklab(45.5% 0.044 -0.179))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #261260, #342079, #422ea8, #503cb7)

Colors



<!-- Primary Colors -->
<color name="midnight_color_10">#261260</color>
<color name="midnight_color_20">#342079</color>
<color name="midnight_color_30">#422ea8</color>
<color name="midnight_color_40">#503cb7</color>

Gradient PRO

Pro feature only

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

PWA prompt