#2a223f

#776b96

#aba5c9

Spirit Silver



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

Grey

Black

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#2a223f	rgb(42, 34, 63)	hsl(260 30% 19%)	hwb(260 13% 75%)	lch(15.3 19.9 300)	lab(15.3 9.81 -17.3)	cmyk 33%, 46%, 0%, 75%
	#776b96	rgb(119, 107, 150)	hsl(260 17% 50%)	hwb(260 42% 41%)	lch(47.6 24.9 299)	lab(47.6 11.9 -21.8)	cmyk 21%, 29%, 0%, 41%
	#aba5c9	rgb(171, 165, 201)	hsl(250 25% 72%)	hwb(250 65% 21%)	lch(69.2 19.3 293)	lab(69.2 7.68 -17.7)	cmyk 15%, 18%, 0%, 21%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#2a223f

AAA - 15.01



#776b96

AA - 4.85



#aba5c9

AA - 2.34



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.6% 0.023 -0.048), oklab(55.5% 0.03 -0.06), oklab(73.9% 0.02 -0.048))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #2a223f, #776b96, #aba5c9)

Colors



<!-- Primary Colors -->
<color name="spirit_silver_color_10">#2a223f</color>
<color name="spirit_silver_color_20">#776b96</color>
<color name="spirit_silver_color_30">#aba5c9</color>

Gradient PRO

Pro feature only

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

PWA prompt