#4b6cb7

#314a80

#182848

Noir Dusk



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
	#4b6cb7	rgb(75, 108, 183)	hsl(220 43% 51%)	hwb(220 29% 28%)	lch(45.9 44.5 277)	lab(45.9 5.79 -44.1)	cmyk 59%, 41%, 0%, 28%
	#314a80	rgb(49, 74, 128)	hsl(220 45% 35%)	hwb(220 19% 50%)	lch(31.6 34.3 277)	lab(31.6 4.13 -34)	cmyk 62%, 42%, 0%, 50%
	#182848	rgb(24, 40, 72)	hsl(220 50% 19%)	hwb(220 9.4% 72%)	lch(16.1 22.5 276)	lab(16.1 2.25 -22.4)	cmyk 67%, 44%, 0%, 72%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#4b6cb7

AA - 5.08



#314a80

AAA - 8.67



#182848

AAA - 14.62



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(54.3% -0.011 -0.123), oklab(41.7% -0.01 -0.095), oklab(28.1% -0.008 -0.063))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #4b6cb7, #314a80, #182848)

Colors



<!-- Primary Colors -->
<color name="noir_dusk_color_10">#4b6cb7</color>
<color name="noir_dusk_color_20">#314a80</color>
<color name="noir_dusk_color_30">#182848</color>

Gradient PRO

Pro feature only

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

PWA prompt