Palette
Deep, earthy reds and warm browns evoke the rustic charm of sun-dried terracotta pottery.
Preview
Interface
A quick look at how Sun-Baked Terracotta reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The Sun-Baked Terracotta palette evokes the rustic charm of sun-dried terracotta pottery, featuring deep, earthy reds and warm browns. This robust collection includes a light terracotta (#CD853F), a rich burnt orange (#D2691E), a bold firebrick red (#B22222), a deeper Indian red (#A52A2A), and a grounding saddle brown (#8B4513). It's an excellent choice for designs that aim to convey authenticity, warmth, and a connection to natural, handcrafted aesthetics.
primary
Use #D2691E as a classic terracotta primary, suitable for headers, brand logos, or dominant design elements.
secondary
Apply #B22222 to add a deep, warm red accent, perfect for calls to action or important highlights.
accent
Employ #CD853F as a lighter highlight, ideal for subtle details, icons, or to break up darker sections.
background
Utilize #8B4513 for a rich, grounding background in darker themes, or pair with a very light cream for brighter designs.
text
For dark backgrounds, use off-white or light cream text. For lighter backgrounds, a deep brown like #8B4513 or black ensures readability.
Create rich, layered designs, natural product packaging, or warm, inviting visual narratives.
#8B4513 · #B22222 · #D2691EIdeal for warm headings, subtle accents, or to evoke the natural texture of sun-baked clay.
#CD853F · #D2691E · #A52A2AUse for strong, grounding elements, deep color blocks, or to convey a sense of heritage and robustness.
#B22222 · #A52A2A · #8B4513:root {
--sun-baked-terracotta-1: #CD853F;
--sun-baked-terracotta-2: #D2691E;
--sun-baked-terracotta-3: #B22222;
--sun-baked-terracotta-4: #A52A2A;
--sun-baked-terracotta-5: #8B4513;
}theme: {
extend: {
colors: {
"sun-baked-terracotta": {
1: "#CD853F",
2: "#D2691E",
3: "#B22222",
4: "#A52A2A",
5: "#8B4513",
}
}
}
}Palette colors
Accessibility
Similar palettes