#6699CC

#4D79A1

#1e334d

Deep Ocean



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

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#6699cc	rgb(102, 153, 204)	hsl(210 50% 60%)	hwb(210 40% 20%)	lch(61.2 32.7 258)	lab(61.2 -6.77 -32)	cmyk 50%, 25%, 0%, 20%
	#4d79a1	rgb(77, 121, 161)	hsl(210 35% 47%)	hwb(210 30% 37%)	lch(48.9 27.4 256)	lab(48.9 -6.75 -26.6)	cmyk 52%, 25%, 0%, 37%
	#1e334d	rgb(30, 51, 77)	hsl(210 44% 21%)	hwb(210 12% 70%)	lch(20.5 18.9 265)	lab(20.5 -1.73 -18.9)	cmyk 61%, 34%, 0%, 70%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#6699CC

AA - 3



#4D79A1

AA - 4.6



#1e334d

AAA - 12.83



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(66.8% -0.033 -0.088), oklab(56.1% -0.031 -0.073), oklab(31.7% -0.014 -0.052))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #6699CC, #4D79A1, #1e334d)

Colors



<!-- Primary Colors -->
<color name="deep_ocean_color_10">#6699CC</color>
<color name="deep_ocean_color_20">#4D79A1</color>
<color name="deep_ocean_color_30">#1e334d</color>

Gradient PRO

Pro feature only

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

PWA prompt