Terracotta
#CE6246Understand. Compare. Create.
Warm colors: names, HEX codes and palettes
Warm colours usually include red, orange and yellow. Start with named HEX examples, then build a palette for your website, printed project or interior with clear roles for each shade.
What are warm colours?
Reds, oranges and yellows are the usual starting points. Warm palettes also use related pinks, rusts, ochres, browns and creamy neutrals. The list is not a fixed set of colour codes: a colour name can describe many different shades.
Temperature is relative. An orange-red can look warmer beside a violet-red; a yellow-green can look warmer beside a blue-green. Compare your swatch with its actual neighbours rather than deciding from the name alone. Muting a colour changes its intensity, without automatically making it cool.
Here, “warm” describes a visual relationship. It does not specify surface temperature, colour temperature in kelvin or a guaranteed emotional effect.
Warm colour names and HEX examples
These four sRGB examples are starting points, not universal standards for their names. Terracotta can provide a clay-like accent; ochre adds a muted yellow; brick gives a darker red; sand offers a light neutral base. Copy a code to try the exact screen colour.
Ochre
#D6AD52Brick red
#9C493DSand
#E0CDA9Three warm palettes with a purpose
Arrange a warm palette as carefully as objects on a table: a main surface, readable text and a limited accent. A palette can look convincing as swatches yet fail when every shade competes for the same amount of space. Start with these original combinations, then test your actual layout.
Terracotta editorial
A light page or project board with a restrained warm accent.
- Cream
#FFF7ED
Background - Terracotta
#CE6246
Decorative accent - Dark brown
#2B2118
Body text
Keep the terracotta in borders, panels or small illustrations. Use the dark brown for reading text; white text on this terracotta is not suitable for normal-sized body copy.
Ochre and brick
An earthy combination for a portfolio, menu or interior mood board.
- Sand
#E0CDA9
Main surface - Ochre
#D6AD52
Small highlight - Brick red
#9C493D
Strong accent
Let sand occupy the largest area, then use ochre and brick for distinct supporting roles. Add dark brown #2B2118 for paragraphs. A brick button with white text is a stronger text pairing than an ochre button with white text.
Warm with a cool counterpoint
A warm base with a blue-green accent for variety.
- Cream
#FFF7ED
Main surface - Terracotta
#CE6246
Warm accent - Deep blue-green
#294D59
Text or counterpoint
Repeat the cool accent in a few connected places, such as headings and navigation. Keep the cream base dominant so the palette still reads as warm. The cool shade creates a temperature contrast; it is not being presented as an exact complementary match.
Warm colours still need readable text
A warm/cool difference is not a readability test. The WCAG AA text-contrast requirement is at least 4.5:1 for normal text, or 3:1 for large text (at least 24 CSS pixels, or about 18.7 pixels when bold). Check the exact foreground/background pair, not the palette as a whole.
| Text / background | Ratio | Normal-text contrast |
|---|---|---|
| White #FFFFFF / brick #9C493D | 6.12:1 | Meets 4.5:1 |
| White #FFFFFF / terracotta #CE6246 | 3.85:1 | Below 4.5:1 |
| White #FFFFFF / ochre #D6AD52 | 2.11:1 | Below 4.5:1 |
| Dark brown #2B2118 / sand #E0CDA9 | 10.11:1 | Meets 4.5:1 |
Ratios are displayed rounded to two decimals; pass/fail decisions use the unrounded calculation. Transparency, gradients and images need a fresh check. A passing pair does not establish that an entire design is accessible. Also use labels or other cues alongside colour for errors, links and status messages.
Adapt your warm palette to the project
Websites and digital layouts
Choose background and text first, then an accent. Test headings, links, buttons and their states against the surfaces they actually touch. Keep the HEX values in a project note so “terracotta” does not drift between different files.
Interiors and decoration
Compare physical samples with the floor, wood and fabrics already in the room. Review them in daylight and under the lighting you use at night. A large painted wall can read differently from a small screen swatch; this page cannot specify an exact paint match.
Printed material
HEX describes an RGB screen value, not an ink recipe. Ask your printer which output profile and paper to use, then check a proof. The CMYK colour guide explains why a simple numerical conversion is only an approximation.
Common questions about warm colours
Can brown be a warm colour?
Yes. Browns with a visible red, orange or yellow bias can support a warm palette. Compare them with your other shades: a greyed brown can feel cooler beside a rich ochre, even if both are called brown.
Can I mix warm and cool colours?
Yes. Use one family as the base and the other for a specific supporting role. For example, the blue-green in the third palette can connect headings and navigation while the larger cream and terracotta areas retain the warm character. See the cool-colour examples and the RGB colour wheel for other relationships.
How can a warm palette stay subtle?
Start with sand or cream across the largest surface. Add a smaller amount of muted terracotta or ochre, then a darker shade for structure and text. Warmth does not require saturated red across an entire page or room.
30 palettes. Your next idea starts here.
Get my free kit →Get the free colour kit: HEX/RGB codes and a project worksheet.
Also discover: Casekit — customer support for online shops.