#0C0D1D

#292A4B

#47497A

#8587B0

#C4C5D9

Shadow

Actions

Explore the gradient in different formats, and actions.

Colors overview

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#0c0d1d	rgb(12, 13, 29)	hsl(240 41% 8%)	hwb(240 4.7% 89%)	lch(4.02 10.5 284)	lab(4.02 2.51 -10.2)	cmyk 59%, 55%, 0%, 89%
	#292a4b	rgb(41, 42, 75)	hsl(240 29% 23%)	hwb(240 16% 71%)	lch(18.3 22.1 289)	lab(18.3 7.13 -20.9)	cmyk 45%, 44%, 0%, 71%
	#47497a	rgb(71, 73, 122)	hsl(240 26% 38%)	hwb(240 28% 52%)	lch(32.6 30.1 288)	lab(32.6 9.44 -28.6)	cmyk 42%, 40%, 0%, 52%
	#8587b0	rgb(133, 135, 176)	hsl(240 21% 61%)	hwb(240 52% 31%)	lch(57.3 22.9 286)	lab(57.3 6.17 -22)	cmyk 24%, 23%, 0%, 31%
	#c4c5d9	rgb(196, 197, 217)	hsl(240 22% 81%)	hwb(240 77% 15%)	lch(79.9 10.4 284)	lab(79.9 2.53 -10.1)	cmyk 10%, 9%, 0%, 15%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#0C0D1D

AAA - 19.24



#292A4B

AAA - 13.75



#47497A

AAA - 8.39



#8587B0

AA - 3.44



#C4C5D9

AA - 1.7



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(16.8% 0.005 -0.033), oklab(30.1% 0.011 -0.058), oklab(42.7% 0.015 -0.079), oklab(63.7% 0.013 -0.06), oklab(82.9% 0.006 -0.027))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #0C0D1D, #292A4B, #47497A, #8587B0, #C4C5D9)

Colors



<!-- Primary Colors -->
<color name="shadow_color_10">#0C0D1D</color>
<color name="shadow_color_20">#292A4B</color>
<color name="shadow_color_30">#47497A</color>
<color name="shadow_color_40">#8587B0</color>
<color name="shadow_color_50">#C4C5D9</color>

Gradient PRO

Pro feature only

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

PWA prompt