#1c5284

#39e240

#e6e8ef

Health



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

Green

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#1c5284	rgb(28, 82, 132)	hsl(210 65% 31%)	hwb(210 11% 48%)	lch(33.4 33.9 264)	lab(33.4 -3.62 -33.7)	cmyk 79%, 38%, 0%, 48%
	#39e240	rgb(57, 226, 64)	hsl(120 74% 55%)	hwb(120 22% 11%)	lch(79.5 90.6 137)	lab(79.5 -66 62.1)	cmyk 75%, 0%, 72%, 11%
	#e6e8ef	rgb(230, 232, 239)	hsl(230 22% 92%)	hwb(230 90% 6.3%)	lch(92 3.66 274)	lab(92 0.257 -3.65)	cmyk 4%, 3%, 0%, 6%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#1c5284

AAA - 8.1



#39e240

AA - 1.73



#e6e8ef

AA - 1.22



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.9% -0.034 -0.094), oklab(79.9% -0.194 0.144), oklab(93.1% 0.001 -0.01))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #1c5284, #39e240, #e6e8ef)

Colors



<!-- Primary Colors -->
<color name="health_color_10">#1c5284</color>
<color name="health_color_20">#39e240</color>
<color name="health_color_30">#e6e8ef</color>

Gradient PRO

Pro feature only

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

PWA prompt