warmearthy
Terracotta Home Color Palette
Terracotta Home is a warm and earthy color palette of 5 colors: Sienna (#9c4a2b), Chocolate (#c8693f), Dark Salmon (#e2a17d), Apricot (#f1d4c0) and Dim Gray (#5b6d5b). Its dominant hue is red.
The darkest color, Sienna, on the lightest, Apricot, gives a 4.35:1 contrast ratio — enough for large headings, but not body text. No pair in it passes AA for normal text, so use it for fills and accents. Chocolate (#c8693f) is its most saturated color and a natural choice for buttons and links.
Colors
- Sienna
- Chocolate
- Dark Salmon
- Apricot
- Dim Gray
CSS Output
:root {
--terracotta-home-1: #9c4a2b;
--terracotta-home-2: #c8693f;
--terracotta-home-3: #e2a17d;
--terracotta-home-4: #f1d4c0;
--terracotta-home-5: #5b6d5b;
}Terracotta Home on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Sienna on Apricot#9c4a2b on #f1d4c04.35:1AA Large
- Dim Gray on Apricot#5b6d5b on #f1d4c03.94:1AA Large