Starlight Dusk Color Gradient

 #3A506B

 #5A708C

 #7A8F9B

 #9AAEAB

 #BABCBC

Colors overview

Blue

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#3a506b	rgb(58, 80, 107)	hsl(210 30% 32%)	hwb(210 23% 58%)	lch(33.1 18.7 262)	lab(33.1 -2.68 -18.5)	cmyk 46%, 25%, 0%, 58%
	#5a708c	rgb(90, 112, 140)	hsl(210 22% 45%)	hwb(210 35% 45%)	lch(46.3 18.5 261)	lab(46.3 -2.89 -18.2)	cmyk 36%, 20%, 0%, 45%
	#7a8f9b	rgb(122, 143, 155)	hsl(200 14% 54%)	hwb(200 48% 39%)	lch(58 10.7 238)	lab(58 -5.72 -9.03)	cmyk 21%, 8%, 0%, 39%
	#9aaeab	rgb(154, 174, 171)	hsl(170 11% 64%)	hwb(170 60% 32%)	lch(69.5 7.71 187)	lab(69.5 -7.65 -0.938)	cmyk 11%, 0%, 2%, 32%
	#babcbc	rgb(186, 188, 188)	hsl(180 1.5% 73%)	hwb(180 73% 26%)	lch(76.1 0.767 200)	lab(76.1 -0.722 -0.258)	cmyk 1%, 0%, 0%, 26%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#3A506B

AAA - 8.26



#5A708C

AA - 5.08



#7A8F9B

AA - 3.37



#9AAEAB

AA - 2.32



#BABCBC

AA - 1.9



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(42.5% -0.015 -0.051), oklab(53.8% -0.014 -0.05), oklab(63.8% -0.018 -0.024), oklab(73.4% -0.023 -0.002), oklab(79.4% -0.002 -0.001))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #3A506B, #5A708C, #7A8F9B, #9AAEAB, #BABCBC)

Colors



<!-- Primary Colors -->
<color name="starlight_dusk_color_10">#3A506B</color>
<color name="starlight_dusk_color_20">#5A708C</color>
<color name="starlight_dusk_color_30">#7A8F9B</color>
<color name="starlight_dusk_color_40">#9AAEAB</color>
<color name="starlight_dusk_color_50">#BABCBC</color>

Gradient PRO

Pro feature only

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

PWA prompt