#76fab3

#6be1a1

#61c890

#57af7f

#4d976e

Marine



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

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#76fab3	rgb(118, 250, 179)	hsl(150 93% 72%)	hwb(150 46% 2%)	lch(89.5 54.9 156)	lab(89.5 -50.1 22.6)	cmyk 53%, 0%, 28%, 2%
	#6be1a1	rgb(107, 225, 161)	hsl(150 66% 65%)	hwb(150 42% 12%)	lch(81.5 50.4 156)	lab(81.5 -45.9 20.8)	cmyk 52%, 0%, 28%, 12%
	#61c890	rgb(97, 200, 144)	hsl(150 48% 58%)	hwb(150 38% 22%)	lch(73.4 45.1 156)	lab(73.4 -41.1 18.6)	cmyk 52%, 0%, 28%, 22%
	#57af7f	rgb(87, 175, 127)	hsl(150 35% 51%)	hwb(150 34% 31%)	lch(65.1 39.7 156)	lab(65.1 -36.2 16.2)	cmyk 50%, 0%, 27%, 31%
	#4d976e	rgb(77, 151, 110)	hsl(150 32% 45%)	hwb(150 30% 41%)	lch(56.9 34.7 156)	lab(56.9 -31.6 14.3)	cmyk 49%, 0%, 27%, 41%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#76fab3

AA - 1.3



#6be1a1

AA - 1.62



#61c890

AA - 2.06



#57af7f

AA - 2.67



#4d976e

AA - 3.51



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(89.2% -0.143 0.059), oklab(82.5% -0.131 0.054), oklab(75.6% -0.117 0.048), oklab(68.6% -0.103 0.042), oklab(61.7% -0.09 0.037))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #76fab3, #6be1a1, #61c890, #57af7f, #4d976e)

Colors



<!-- Primary Colors -->
<color name="marine_color_10">#76fab3</color>
<color name="marine_color_20">#6be1a1</color>
<color name="marine_color_30">#61c890</color>
<color name="marine_color_40">#57af7f</color>
<color name="marine_color_50">#4d976e</color>

Gradient PRO

Pro feature only

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

PWA prompt