#2e4438

#435b4d

#778f80

#a4b7ab

Bed

Actions

Explore the gradient in different formats, and actions.

Colors overview

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#2e4438	rgb(46, 68, 56)	hsl(150 19% 22%)	hwb(150 18% 73%)	lch(26.7 12.1 159)	lab(26.7 -11.3 4.4)	cmyk 32%, 0%, 18%, 73%
	#435b4d	rgb(67, 91, 77)	hsl(150 15% 31%)	hwb(150 26% 64%)	lch(36.4 12.9 157)	lab(36.4 -11.9 5.02)	cmyk 26%, 0%, 15%, 64%
	#778f80	rgb(119, 143, 128)	hsl(140 9.7% 51%)	hwb(140 47% 44%)	lch(57.2 12.3 156)	lab(57.2 -11.2 5.02)	cmyk 17%, 0%, 10%, 44%
	#a4b7ab	rgb(164, 183, 171)	hsl(140 12% 68%)	hwb(140 64% 28%)	lch(72.7 9.35 156)	lab(72.7 -8.55 3.78)	cmyk 10%, 0%, 7%, 28%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#2e4438

AAA - 10.49



#435b4d

AAA - 7.38



#778f80

AA - 3.48



#a4b7ab

AA - 2.11



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(36.4% -0.033 0.012), oklab(44.7% -0.035 0.013), oklab(62.7% -0.033 0.013), oklab(76.1% -0.025 0.01))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #2e4438, #435b4d, #778f80, #a4b7ab)

Colors



<!-- Primary Colors -->
<color name="bed_color_10">#2e4438</color>
<color name="bed_color_20">#435b4d</color>
<color name="bed_color_30">#778f80</color>
<color name="bed_color_40">#a4b7ab</color>

Gradient PRO

Pro feature only

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

PWA prompt