#1c2052

#410e6b

#502570

Midnight



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

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#1c2052	rgb(28, 32, 82)	hsl(240 49% 22%)	hwb(240 11% 68%)	lch(14.4 34.1 291)	lab(14.4 12.1 -31.8)	cmyk 66%, 61%, 0%, 68%
	#410e6b	rgb(65, 14, 107)	hsl(270 77% 24%)	hwb(270 5.5% 58%)	lch(17.4 57.2 311)	lab(17.4 37.2 -43.4)	cmyk 39%, 87%, 0%, 58%
	#502570	rgb(80, 37, 112)	hsl(270 50% 29%)	hwb(270 15% 56%)	lch(24 47.7 311)	lab(24 31.5 -35.8)	cmyk 29%, 67%, 0%, 56%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#1c2052

AAA - 15.24



#410e6b

AAA - 14



#502570

AAA - 11.41



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.3% 0.008 -0.09), oklab(31.1% 0.08 -0.122), oklab(36.3% 0.077 -0.1))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #1c2052, #410e6b, #502570)

Colors



<!-- Primary Colors -->
<color name="midnight_color_10">#1c2052</color>
<color name="midnight_color_20">#410e6b</color>
<color name="midnight_color_30">#502570</color>

Gradient PRO

Pro feature only

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

PWA prompt