Beach

Actions

Explore the gradient in different formats, and actions.

Colors overview

Cyan

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#0e8966	rgb(14, 137, 102)	hsl(160 81% 30%)	hwb(160 5.5% 46%)	lch(50.5 40.1 166)	lab(50.5 -38.9 9.7)	cmyk 90%, 0%, 26%, 46%
	#94e5e5	rgb(148, 229, 229)	hsl(180 61% 74%)	hwb(180 58% 10%)	lch(85.8 27 198)	lab(85.8 -25.7 -8.28)	cmyk 35%, 0%, 0%, 10%
	#fa9680	rgb(250, 150, 128)	hsl(11 92% 74%)	hwb(11 50% 2%)	lch(72.5 46.6 37.7)	lab(72.5 36.9 28.5)	cmyk 0%, 40%, 49%, 2%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#0e8966

AA - 4.38



#94e5e5

AA - 1.43



#fa9680

AA - 2.15



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(56% -0.109 0.026), oklab(87% -0.076 -0.022), oklab(77.2% 0.105 0.069))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #0e8966, #94e5e5, #fa9680)

Colors



<!-- Primary Colors -->
<color name="beach_color_10">#0e8966</color>
<color name="beach_color_20">#94e5e5</color>
<color name="beach_color_30">#fa9680</color>

Gradient PRO

Pro feature only

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

PWA prompt