#d2691e

#b85a17

#a44b15

#903c14

#7c2d12

Canela

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#d2691e	rgb(210, 105, 30)	hsl(25 75% 47%)	hwb(25 12% 18%)	lch(56.6 69.7 55.7)	lab(56.6 39.2 57.6)	cmyk 0%, 50%, 86%, 18%
	#b85a17	rgb(184, 90, 23)	hsl(25 78% 41%)	hwb(25 9% 28%)	lch(49.6 63.8 55.5)	lab(49.6 36.1 52.6)	cmyk 0%, 51%, 88%, 28%
	#a44b15	rgb(164, 75, 21)	hsl(23 77% 36%)	hwb(23 8.2% 36%)	lch(43.3 58.9 53)	lab(43.3 35.4 47)	cmyk 0%, 54%, 87%, 36%
	#903c14	rgb(144, 60, 20)	hsl(19 76% 32%)	hwb(19 7.8% 44%)	lch(36.9 53.6 49.5)	lab(36.9 34.8 40.7)	cmyk 0%, 58%, 86%, 44%
	#7c2d12	rgb(124, 45, 18)	hsl(15 75% 28%)	hwb(15 7.1% 51%)	lch(30.4 48.5 45.5)	lab(30.4 34 34.6)	cmyk 0%, 64%, 85%, 51%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#d2691e

AA - 3.63



#b85a17

AA - 4.65



#a44b15

AA - 5.84



#903c14

AAA - 7.38



#7c2d12

AAA - 9.37



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(63.4% 0.099 0.119), oklab(57.3% 0.091 0.108), oklab(51.9% 0.091 0.097), oklab(46.4% 0.092 0.084), oklab(40.8% 0.092 0.072))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #d2691e, #b85a17, #a44b15, #903c14, #7c2d12)

Colors



<!-- Primary Colors -->
<color name="canela_color_10">#d2691e</color>
<color name="canela_color_20">#b85a17</color>
<color name="canela_color_30">#a44b15</color>
<color name="canela_color_40">#903c14</color>
<color name="canela_color_50">#7c2d12</color>

Gradient PRO

Pro feature only

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

PWA prompt