Caribe

Actions

Explore the gradient in different formats, and actions.

Colors overview

Blue

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#6576fc	rgb(101, 118, 252)	hsl(230 96% 69%)	hwb(230 40% 1.2%)	lch(53.8 74.5 289)	lab(53.8 24.6 -70.3)	cmyk 60%, 53%, 0%, 1%
	#6be1ff	rgb(107, 225, 255)	hsl(190 100% 71%)	hwb(190 42% 0%)	lch(83.6 38.1 222)	lab(83.6 -28.4 -25.3)	cmyk 58%, 12%, 0%, 0%
	#87ffa9	rgb(135, 255, 169)	hsl(140 100% 76%)	hwb(140 53% 0%)	lch(91.5 57.7 148)	lab(91.5 -49.1 30.3)	cmyk 47%, 0%, 34%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#6576fc

AA - 3.78



#6be1ff

AA - 1.51



#87ffa9

AA - 1.24



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(62.3% 0.013 -0.198), oklab(85.3% -0.091 -0.068), oklab(90.8% -0.141 0.078))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #6576fc, #6be1ff, #87ffa9)

Colors



<!-- Primary Colors -->
<color name="caribe_color_10">#6576fc</color>
<color name="caribe_color_20">#6be1ff</color>
<color name="caribe_color_30">#87ffa9</color>

Gradient PRO

Pro feature only

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

PWA prompt