#c98762

#d08a5f

#d68d5b

#dc9057

#e29453

#e9974e

#ee9b47

#f49f40

#f9a337

#fea72c

Honeycomb

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#c98762	rgb(201, 135, 98)	hsl(22 49% 59%)	hwb(22 38% 21%)	lch(62.6 38.4 53)	lab(62.6 23.1 30.7)	cmyk 0%, 33%, 51%, 21%
	#d08a5f	rgb(208, 138, 95)	hsl(23 55% 59%)	hwb(23 37% 18%)	lch(64.1 42.1 54.9)	lab(64.1 24.2 34.4)	cmyk 0%, 34%, 54%, 18%
	#d68d5b	rgb(214, 141, 91)	hsl(24 60% 60%)	hwb(24 36% 16%)	lch(65.5 45.7 57)	lab(65.5 24.9 38.4)	cmyk 0%, 34%, 57%, 16%
	#dc9057	rgb(220, 144, 87)	hsl(26 66% 60%)	hwb(26 34% 14%)	lch(66.9 49.4 58.8)	lab(66.9 25.6 42.3)	cmyk 0%, 35%, 60%, 14%
	#e29453	rgb(226, 148, 83)	hsl(27 71% 61%)	hwb(27 33% 11%)	lch(68.5 53.1 60.9)	lab(68.5 25.8 46.4)	cmyk 0%, 35%, 63%, 11%
	#e9974e	rgb(233, 151, 78)	hsl(28 78% 61%)	hwb(28 31% 8.6%)	lch(70 57.5 62)	lab(70 27 50.7)	cmyk 0%, 35%, 67%, 9%
	#ee9b47	rgb(238, 155, 71)	hsl(30 83% 61%)	hwb(30 28% 6.7%)	lch(71.5 61.8 64.4)	lab(71.5 26.7 55.7)	cmyk 0%, 35%, 70%, 7%
	#f49f40	rgb(244, 159, 64)	hsl(32 89% 60%)	hwb(32 25% 4.3%)	lch(73.1 66.4 66)	lab(73.1 27 60.6)	cmyk 0%, 35%, 74%, 4%
	#f9a337	rgb(249, 163, 55)	hsl(33 94% 60%)	hwb(33 22% 2.4%)	lch(74.5 71 67.9)	lab(74.5 26.8 65.8)	cmyk 0%, 35%, 78%, 2%
	#fea72c	rgb(254, 167, 44)	hsl(35 99% 58%)	hwb(35 17% 0.39%)	lch(76 75.9 69.5)	lab(76 26.6 71.1)	cmyk 0%, 34%, 83%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#c98762

AA - 2.94



#d08a5f

AA - 2.8



#d68d5b

AA - 2.68



#dc9057

AA - 2.57



#e29453

AA - 2.44



#e9974e

AA - 2.33



#ee9b47

AA - 2.23



#f49f40

AA - 2.12



#f9a337

AA - 2.03



#fea72c

AA - 1.94



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(68.2% 0.062 0.073), oklab(69.5% 0.064 0.082), oklab(70.7% 0.065 0.09), oklab(71.9% 0.065 0.098), oklab(73.3% 0.064 0.106), oklab(74.6% 0.066 0.115), oklab(75.8% 0.063 0.124), oklab(77.2% 0.062 0.133), oklab(78.4% 0.059 0.142), oklab(79.6% 0.057 0.151))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c98762, #d08a5f, #d68d5b, #dc9057, #e29453, #e9974e, #ee9b47, #f49f40, #f9a337, #fea72c)

Colors



<!-- Primary Colors -->
<color name="honeycomb_color_10">#c98762</color>
<color name="honeycomb_color_20">#d08a5f</color>
<color name="honeycomb_color_30">#d68d5b</color>
<color name="honeycomb_color_40">#dc9057</color>
<color name="honeycomb_color_50">#e29453</color>
<color name="honeycomb_color_60">#e9974e</color>
<color name="honeycomb_color_70">#ee9b47</color>
<color name="honeycomb_color_80">#f49f40</color>
<color name="honeycomb_color_90">#f9a337</color>
<color name="honeycomb_color_100">#fea72c</color>

Gradient PRO

Pro feature only

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

PWA prompt