#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	OKLAB HDR	OKLCH HDR	P3 HDR
	#c98762	rgb(201, 135, 98)	hsl(22 49% 59%)	oklab(68% 0.06 0.07)	oklch(68% 0.1 50)	color(display-p3 0.75 0.54 0.41)
	#d08a5f	rgb(208, 138, 95)	hsl(23 55% 59%)	oklab(70% 0.06 0.08)	oklch(70% 0.1 52)	color(display-p3 0.78 0.55 0.4)
	#d68d5b	rgb(214, 141, 91)	hsl(24 60% 60%)	oklab(71% 0.06 0.09)	oklch(71% 0.11 54)	color(display-p3 0.8 0.57 0.39)
	#dc9057	rgb(220, 144, 87)	hsl(26 66% 60%)	oklab(72% 0.07 0.1)	oklch(72% 0.12 56)	color(display-p3 0.82 0.58 0.38)
	#e29453	rgb(226, 148, 83)	hsl(27 71% 61%)	oklab(73% 0.06 0.11)	oklch(73% 0.12 59)	color(display-p3 0.84 0.59 0.37)
	#e9974e	rgb(233, 151, 78)	hsl(28 78% 61%)	oklab(75% 0.07 0.11)	oklch(75% 0.13 60)	color(display-p3 0.87 0.61 0.36)
	#ee9b47	rgb(238, 155, 71)	hsl(30 83% 61%)	oklab(76% 0.06 0.12)	oklch(76% 0.14 63)	color(display-p3 0.89 0.62 0.34)
	#f49f40	rgb(244, 159, 64)	hsl(32 89% 60%)	oklab(77% 0.06 0.13)	oklch(77% 0.15 65)	color(display-p3 0.91 0.64 0.33)
	#f9a337	rgb(249, 163, 55)	hsl(33 94% 60%)	oklab(78% 0.06 0.14)	oklch(78% 0.15 67)	color(display-p3 0.93 0.65 0.31)
	#fea72c	rgb(254, 167, 44)	hsl(35 99% 58%)	oklab(80% 0.06 0.15)	oklch(80% 0.16 69)	color(display-p3 0.95 0.67 0.29)

 Click on a color value to copy it 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.

Love your coffee as much as we do?

Buy now

Colorffy

Love your taco as much as we do?

Shop now

Colorffy

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 AI features, all app tokens, export files, and more.

PWA prompt