Cinnamon is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #D47E30
- RGB value: 83.1% red, 49.4% green and 18.8% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are a few ways to consider using cinnamon in your designs:
- Pair with complementary colors. Combine cinnamon with neutral shades like creams, beiges, or muted greens to maintain an earthy and balanced color scheme.
- Evoke seasonal themes. Leverage cinnamon for seasonal promotions or themes, particularly in autumn. Its association with fall spices and warm, cozy settings makes it ideal for marketing campaigns during this season.
- Design for comfort. In applications where comfort and ease are prioritized, such as reading apps or wellness platforms, incorporate cinnamon to foster a relaxing and pleasant user experience.
- Enhance typography. Use cinnamon for headlines to add a touch of warmth to your content.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same warm and earthy spectrum as cinnamon, consider:
- Burnt sienna (#ED7B58) is similar as it also exudes a rich, deep orange with a hint of brown, making it feel like a lighter shade of cinnamon.
- Copper (#B87333) resembles cinnamon with its red-orange metallic tone, sharing the warmth and vibrancy that characterizes cinnamon.
- Rust (#B7410E) offers a more intense and deeper red-orange, evoking a stronger earthy feel similar to cinnamon.
- Amber (#FFBF00) shares cinnamon's golden undertone, presenting a brighter and more vibrant hue.
To complement cinnamon's rich tones, consider pairing it with:
- Teal (#069494) provides a striking contrast that highlights cinnamon’s warmth.
- Cream (#FDFBD4) softens the boldness of cinnamon with its light, airy presence.
- Dark green (#013220) anchors the brightness of cinnamon with its deep, lush backdrop.
- Slate gray (#708090) complements cinnamon by offering a neutral but contrasting canvas.
- Navy blue (#000080) pairs well by offering a deep, cool contrast to the warm, vibrant cinnamon.
Other colors worth considering include dusty pink to soften the environment, olive green for a natural look, and light gray for a modern and understated elegance.
While cinnamon is versatile, it may clash with:
- Light purple (#9370DB) as its cool, pale hue can diminish the impact of cinnamon's warmth.
- Bright pink (#FF69B4) competes for attention and can overpower the subtlety of cinnamon.
- Lime green (#89F336) often creates a visually harsh contrast, detracting from cinnamon's earthy quality.
- Neon blue (#0000FF) clashes with cinnamon by introducing a very vivid, contrasting color that can disrupt visual harmony.
- Mint green (#ADEBB3) might be too light and cool, which can wash out the warmth that makes cinnamon appealing.
Cinnamon evokes warmth and comfort, just like the taste of the spice itself. In some cultures, cinnamon's historical value as a spice is linked to wealth and luxury.
Cinnamon is seen as a stimulant in color psychology, blending red's warmth and energy with brown's natural calmness. This combination creates a sense of comfort, which can encourage conversation and appetite.
In UI design, cinnamon creates a warm and welcoming atmosphere. It's ideal for brands that want to project comfort and reliability, like food businesses or nature-themed interfaces. Cinnamon can also suggest a sense of tradition and timelessness, making it suitable for products or services associated with heritage, luxury, or artisanal qualities.
The color cinnamon gets its name from the spice of the same name, which has been used and valued across many cultures for thousands of years. Historically, cinnamon was so highly prized that it was often regarded as a gift fit for monarchs and gods. The spice and the color originate from the brownish-red bark of the cinnamon tree, native to Sri Lanka and other South and Southeast Asian regions.
Cinnamon has been a popular color in art and design for its warm, earthy hue. It has been used in textiles and pottery across various cultures, from the ancient Egyptians to the South Asians, who utilized the natural dyes derived from cinnamon and other spices to create rich, vibrant colors in their fabrics and artwork.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Tobacco
Patina
Old Fashioned
Contrast 3.08
- Large Text
#D47E30
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 6.83
- Large Text
#D47E30
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #D47E30, known as cinnamon, has RGB values of R:212, G:126, B:48 and CMYK values of C:0, M:0.41, Y:0.77, K:0.17.
| VALUE | CSS | |
|---|---|---|
| HEX | D47E30 | #D47E30 |
| RGB DECIMAL | 212, 126, 48 | rgb(212,126,48) |
| RGB PERCENTAGE | 83.1, 49.4, 18.8 | rgb(83.1%,49.4%,18.8%) |
| CMYK | 0, 41, 77, 17 | |
| HSL | 28.5°, 65.6, 51 | hsl(28.5,65.6%,51%) |
| HSV (OR HSB) | 28.5°, 77.4, 83.1 | |
| WEB SAFE | CC6633 | #CC6633 |
| CIE-LAB | 60.901, 27.415, 54.147 | |
| XYZ | 35.147, 29.135, 6.569 | |
| xyY | 0.496, 0.411, 29.135 | |
| CIE-LCH | 60.901, 60.691, 63.147 | |
| CIE-LUV | 60.901, 69.653, 51.265 | |
| HUNTER-LAB | 53.977, 21.77, 30.568 | |
| BINARY | 11010100, 01111110, 00110000 | |
| iOS - SwiftUI | Color(red: 212/255, green: 126/255, blue: 48/255) | |
| iOS - UIKit | UIColor(red: 212/255.0, green: 126/255.0, blue: 48/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFD47E30) |
