#57e0b8

#11ab8c

#006278

#012987

Analysis

Actions

Explore the gradient in different formats, and actions.

Colors overview

Green

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#57e0b8	rgb(87, 224, 184)	hsl(160 69% 61%)	hwb(160 34% 12%)	lch(81 46.8 170)	lab(81 -46.1 8.06)	cmyk 61%, 0%, 18%, 12%
	#11ab8c	rgb(17, 171, 140)	hsl(170 82% 37%)	hwb(170 6.7% 33%)	lch(62.4 44 173)	lab(62.4 -43.7 5.17)	cmyk 90%, 0%, 18%, 33%
	#006278	rgb(0, 98, 120)	hsl(190 100% 24%)	hwb(190 0% 53%)	lch(37.7 27.3 226)	lab(37.7 -18.9 -19.8)	cmyk 100%, 18%, 0%, 53%
	#012987	rgb(1, 41, 135)	hsl(220 99% 27%)	hwb(220 0.39% 47%)	lch(20.3 60.6 291)	lab(20.3 21.3 -56.7)	cmyk 99%, 70%, 0%, 47%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#57e0b8

AA - 1.64



#11ab8c

AA - 2.9



#006278

AA - 6.95



#012987

AAA - 12.58



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(82.1% -0.131 0.022), oklab(66.2% -0.123 0.014), oklab(45.9% -0.064 -0.054), oklab(33.3% -0.02 -0.16))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #57e0b8, #11ab8c, #006278, #012987)

Colors



<!-- Primary Colors -->
<color name="analysis_color_10">#57e0b8</color>
<color name="analysis_color_20">#11ab8c</color>
<color name="analysis_color_30">#006278</color>
<color name="analysis_color_40">#012987</color>

Gradient PRO

Pro feature only

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

PWA prompt