Color Directory
Terracotta
The warm orange-red of fired clay pots.
#E2725B
- HEX
- #E2725B
- RGB
- rgb(226, 114, 91)
- HSL
- hsl(10, 70%, 62%)
Check Terracotta
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #E2725B in the sRGB colour space.
About this entry
What it is
The warm orange-red of fired clay pots.
Earthy palettes, food brands and autumn campaigns.
Copy & use
How to copy and use terracotta
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Earthy palettes, food brands and autumn campaigns.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from terracotta
Each step is mixed toward white or black from #E2725B in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#F3C7BD
rgb(243, 199, 189)
Lighter 30%
#EB9C8C
rgb(235, 156, 140)
- Base
Base
#E2725B
rgb(226, 114, 91)
Darker 30%
#9E5040
rgb(158, 80, 64)
Darker 60%
#5A2E24
rgb(90, 46, 36)
Name & pairing
Where terracotta comes from
Italian for baked earth, and the colour of fired unglazed clay. The orange comes from iron oxide in the clay, which is why the shade recurs across pottery from completely unconnected cultures.
What to put beside it
Natural against cream, sand and olive. Beside a cool blue it becomes distinctly louder, which is useful when you want it to be the accent rather than the ground.
Common questions
Using terracotta
What is terracotta?
The warm orange-red of fired clay pots. Earthy palettes, food brands and autumn campaigns.
What are the colour values for Terracotta?
Terracotta is HEX #E2725B, RGB rgb(226, 114, 91), HSL hsl(10, 70%, 62%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will terracotta work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise terracotta after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing