#F4C66C

#f2a45e

#ed8052

#e55945

Marigolds

Actions

Explore the gradient in different formats, and actions.

Colors overview

Yellow

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f4c66c	rgb(244, 198, 108)	hsl(40 86% 69%)	hwb(40 42% 4.3%)	lch(82.7 51.8 79.5)	lab(82.7 9.4 50.9)	cmyk 0%, 19%, 56%, 4%
	#f2a45e	rgb(242, 164, 94)	hsl(28 85% 66%)	hwb(28 37% 5.1%)	lch(74.2 54 62.7)	lab(74.2 24.8 48)	cmyk 0%, 32%, 61%, 5%
	#ed8052	rgb(237, 128, 82)	hsl(18 81% 63%)	hwb(18 32% 7.1%)	lch(65.6 59.7 47.7)	lab(65.6 40.2 44.1)	cmyk 0%, 46%, 65%, 7%
	#e55945	rgb(229, 89, 69)	hsl(7.5 75% 58%)	hwb(7.5 27% 10%)	lch(57 68.2 36.9)	lab(57 54.5 41)	cmyk 0%, 61%, 70%, 10%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#F4C66C

AA - 1.59



#f2a45e

AA - 2.04



#ed8052

AA - 2.68



#e55945

AA - 3.59



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(84.9% 0.015 0.119), oklab(78.1% 0.061 0.111), oklab(71.3% 0.108 0.1), oklab(64.4% 0.153 0.091))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F4C66C, #f2a45e, #ed8052, #e55945)

Colors



<!-- Primary Colors -->
<color name="marigolds_color_10">#F4C66C</color>
<color name="marigolds_color_20">#f2a45e</color>
<color name="marigolds_color_30">#ed8052</color>
<color name="marigolds_color_40">#e55945</color>

Gradient PRO

Pro feature only

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

PWA prompt