#006699

#6699CC

#99CCFF

#99E6FF

Dolphin

Actions

Explore the gradient in different formats, and actions.

Colors overview

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#006699	rgb(0, 102, 153)	hsl(200 100% 30%)	hwb(200 0% 40%)	lch(40.3 37 253)	lab(40.3 -10.5 -35.4)	cmyk 100%, 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%
	#99ccff	rgb(153, 204, 255)	hsl(210 100% 80%)	hwb(210 60% 0%)	lch(79.9 31.7 256)	lab(79.9 -7.65 -30.8)	cmyk 40%, 20%, 0%, 0%
	#99e6ff	rgb(153, 230, 255)	hsl(190 100% 80%)	hwb(190 60% 0%)	lch(86.9 28.3 225)	lab(86.9 -20 -20.1)	cmyk 40%, 10%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#006699

AA - 6.24



#6699CC

AA - 3



#99CCFF

AA - 1.68



#99E6FF

AA - 1.38



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(48.7% -0.055 -0.099), oklab(66.8% -0.033 -0.088), oklab(82.8% -0.032 -0.084), oklab(88.3% -0.063 -0.054))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #006699, #6699CC, #99CCFF, #99E6FF)

Colors



<!-- Primary Colors -->
<color name="dolphin_color_10">#006699</color>
<color name="dolphin_color_20">#6699CC</color>
<color name="dolphin_color_30">#99CCFF</color>
<color name="dolphin_color_40">#99E6FF</color>

Gradient PRO

Pro feature only

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

PWA prompt