Color Conversion
#983b08Terracotta Ember
About this color
Grounded warmth with quiet intensity
A deep, sun-baked burnt orange with tight red undertones and a bark-like depth. It feels warm, grounded, and quietly fierce — like a memory of fire and earth.
Designer tip: Use Terracotta Ember as the dominant mid-tone in a card or product hero and balance it with a cool teal accent (use a 4:1 ratio of Terracotta Ember to teal) to create readable contrast without losing warmth.
Best use case: Branding for artisanal food, leather goods, or heritage outdoor equipment where tactile warmth and handcrafted credibility must read at small scales (logos, labels, hangtags).
Psychology
Psychological traits and emotional associations
Effect
In a space, this shade anchors areas and draws attention without flashy brightness; it encourages lingering, tactile engagement and suggests handcrafted quality. On screens or packaging it reads as confident and mature, making products feel rooted and substantial.
Emotional impact
Viewers typically feel comforted and subtly energized — like the reassurance of a hearth.
Meaning & symbolism
Cultural symbolism and significance
Cultural significance
In Mediterranean and Middle Eastern contexts, terracotta tones are tied to ceramics, architecture, and the earth — signaling tradition and permanence. In Western fashion and design they read as 'heritage' or vintage, often used to imply handcrafted quality. In some East Asian palettes similar rusty oranges are associated with seasonal change and harvest festivals.
Positive associations
Associated with artisanal pottery, Mediterranean architecture, and harvest-time warmth (Mediterranean, Middle Eastern, Western autumn traditions).
Negative associations
Can be seen as dusty or old-fashioned when applied without contemporary contrast (Western contexts) and in some modern corporate settings it may read as too rustic or informal (international corporate environments).
Design applications
How this color is used across different fields
Packaging for small-batch foods
Use as the primary label field to convey baked, roasted or spiced flavors; it reads as edible and handcrafted when paired with cream paper and embossed typography.
Leather goods and accessories
As a dyed leather or trim color it reads like aged, vegetable-tanned hide and signals durability and craft; ideal for straps, tabs, and logo stamping.
Hospitality interiors (lobby accents)
Apply on a feature wall, banquette upholstery or ceramic tiles to create a welcoming, cozy focal point that survives warm lighting well.
Editorial design and covers
Use as a block color behind white or cream headlines for magazines about food, travel, or craft to communicate authenticity and visual warmth.
Outdoor gear branding
Employ on labels, tags, and web hero images to evoke sun-baked landscapes and rugged reliability without resorting to neon or high-contrast brights.
Design guidance
Practical tips for using this color effectively in your designs
Do this
- + Pair with a desaturated cool teal (use #0A7A98) as an accent to unlock lively contrast without harshness.
- + Use on tactile materials — uncoated cardstock, matte ceramic, or vegetable-tanned leather — to reinforce its earthy character.
- + Reserve for focal elements (headers, hero blocks, key product parts) and use lighter warm neutrals for surrounding fields to maintain readability.
Avoid this
- - Don't place small white text directly on this color without testing contrast at intended sizes.
- - Don't combine with saturated neon greens or bright magentas — they create an aggressive clash that undermines warmth.
- - Don't use as the sole background color for long-form reading surfaces; it tires the eyes in large areas.
Fundamentals: Respect contrast and material: this color succeeds when coupled with tactile surfaces and cool accents to balance its warmth.
Overuse risk: When Terracotta Ember dominates a palette it can make a design feel heavy, dated, or monochromatic — viewers may perceive interiors as too dark or brand systems as overly rustic. Use measured accents and neutrals to keep the warmth intentional rather than overwhelming.
Brand fit
Industries and brand archetypes that align with this color
Trust level
medium
Seriousness
balanced
Trend
Color pairing
Colors that complement and enhance this shade
#0A7A98
True complementary teal — provides chromatic contrast (complementary harmony) that brightens without clashing.
#B36A10
Analogous golden-ochre — extends warmth and creates a layered, tonal palette (analogous harmony).
#3B5F08
Earthy olive green — anchors the warm orange in an organic triadic/split-complementary scheme for rustic depth.
Typography hints: For headings on light backgrounds use a warm serif (e.g., Georgia or Merriweather, 600–700 weight); for UI labels on Terracotta Ember use an off-white (EDE7DF or pure #FFFFFF tested for contrast) in a sans-serif SemiBold (e.g., Montserrat/Muli 600) and avoid thin hairline weights.
Historical significance
The story and heritage of this color
Earth pigments in the orange-brown range—iron oxides, red ochres and burnt siennas—have been used since prehistoric cave painting and ancient ceramics; kiln-fired terracotta and iron-rich clays produced these deep orange-browns for pottery and roofing across Mediterranean and Near Eastern cultures. Artists in the Renaissance used burnt sienna (heated raw sienna) to achieve warm midtones, and it became a staple ground and glaze pigment for centuries.
Architecturally, this hue shows up in Roman and Moorish terracotta tiles, brickwork, and the façades of vernacular buildings; in fashion it surfaces periodically in rustic and workwear palettes, where leather, canvas, and dyed wool take on similar tones. Painters from the 18th century onward used earth reds to render skin tones, shadows, and warm backgrounds, while 20th-century designers exploited the color for mid-century modern interiors and industrial product finishes.
Today this specific deep burnt-orange is experiencing renewed interest in craft, hospitality, and sustainable branding — chosen to signal artisanal production, eco-minded materials, and timelessness. Contemporary applications range from cookware finishes and boutique coffee packaging to UI accents for heritage brands seeking tactile warmth in digital spaces.
Variations
The purpose of this section is to accurately produce tints (pure white added) and shades (pure black added) of your selected color in 10% increments.
Pro Tip: Use shades for hover states and shadows, tints for highlights and backgrounds.
Shades
Darker variations created by adding black to your base color.
Tints
Lighter variations created by adding white to your base color.
Common Use Cases
- • UI component states (hover, active, disabled)
- • Creating depth with shadows and highlights
- • Building consistent color systems
Design System Tip
These variations form the foundation of a cohesive color palette. Export them to maintain consistency across your entire project.
Color Combinations
Each harmony has its own mood. Use harmonies to brainstorm color combos that work well together.
How to Use
Click on any color to copy its hex value. These combinations are mathematically proven to create visual harmony.
Why It Matters
Color harmonies create balance and evoke specific emotions in your designs.
Complement
A color and its opposite on the color wheel, +180 degrees of hue. High contrast.
Split-complementary
A color and two adjacent to its complement, +/-30 degrees of hue from the value opposite the main color. Bold like a straight complement, but more versatile.
Triadic
Three colors spaced evenly along the color wheel, each 120 degrees of hue apart. Best to allow one color to dominate and use the others as accents.
Analogous
Three colors of the same luminance and saturation with hues that are adjacent on the color wheel, 30 degrees apart. Smooth transitions.
Monochromatic
Three colors of the same hue with luminance values +/-50%. Subtle and refined.
Tetradic
Two sets of complementary colors, separated by 60 degrees of hue.
Color Theory Principles
Balance
Use one dominant color, support with secondary, and accent sparingly.
Contrast
Ensure sufficient contrast for readability and accessibility.
Harmony
Colors should work together to create a unified visual experience.
Color Contrast Checker
Test color combinations to ensure they meet WCAG accessibility standards for text readability.
Text Color
Background Color
Contrast
WCAG Standards
Advanced Contrast Checker
Fine-tune with sliders, multiple previews & more
Everybody is a Genius. But If You Judge a Fish by Its Ability to Climb a Tree, It Will Live Its Whole Life Believing that It is Stupid.