#223366

#446699

#6699cc

#88ccee

Harmony

Actions

Explore the gradient in different formats, and actions.

Colors overview

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#223366	rgb(34, 51, 102)	hsl(230 50% 27%)	hwb(230 13% 60%)	lch(22.1 33.6 282)	lab(22.1 7.15 -32.8)	cmyk 67%, 50%, 0%, 60%
	#446699	rgb(68, 102, 153)	hsl(220 38% 43%)	hwb(220 27% 40%)	lch(42.4 32.1 269)	lab(42.4 -0.626 -32.1)	cmyk 56%, 33%, 0%, 40%
	#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%
	#88ccee	rgb(136, 204, 238)	hsl(200 75% 73%)	hwb(200 53% 6.7%)	lch(78.4 28.7 237)	lab(78.4 -15.7 -24)	cmyk 43%, 14%, 0%, 7%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#223366

AAA - 12.11



#446699

AA - 5.82



#6699cc

AA - 3



#88ccee

AA - 1.76



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(33.6% -0.004 -0.092), oklab(50.8% -0.018 -0.089), oklab(66.8% -0.033 -0.088), oklab(81.2% -0.053 -0.065))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #223366, #446699, #6699cc, #88ccee)

Colors



<!-- Primary Colors -->
<color name="harmony_color_10">#223366</color>
<color name="harmony_color_20">#446699</color>
<color name="harmony_color_30">#6699cc</color>
<color name="harmony_color_40">#88ccee</color>

Gradient PRO

Pro feature only

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

PWA prompt