Palette
Warm reds and sun-baked oranges lead the eye through an ancient, dusty terracotta landscape.
Preview
Interface
A quick look at how Terracotta Vista Path 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 Terracotta Vista Path palette guides the eye through an ancient, dusty terracotta landscape with its warm reds and sun-baked oranges. The grounding #A44A3F and vibrant #C47451 lead into the softer #E69F71, culminating in the bright #F7D08A. A clean, near-white #FDF7DC provides a crisp, sandy contrast. This palette is excellent for designers and developers aiming to create natural, earthy, and inviting experiences, reminiscent of sun-drenched paths and historic clay structures.
primary
Utilize #A44A3F as a rich, grounding, main brand color for impactful headings or key visual elements.
secondary
Employ #C47451 for supporting warmth, secondary headings, or prominent call-to-action buttons.
accent
Apply #E69F71 for bright highlights, interactive elements, or to draw attention to key features.
background
Use #FDF7DC as a light, sandy base for main content areas, providing a breathable and clean canvas.
text
Choose #A44A3F for darker, readable text for headings and body copy, ensuring strong contrast against lighter backgrounds.
Create smooth transitions for headers, hero sections, or background elements that evoke a sunset glow.
#A44A3F · #C47451 · #E69F71Form a strong text-on-background combination, with the primary terracotta on the light base, accented by the secondary orange.
#A44A3F · #FDF7DC · #C47451Achieve subtle accents, secondary UI components, or background textures that blend seamlessly with a sandy feel.
#E69F71 · #F7D08A · #FDF7DC:root {
--terracotta-vista-path-1: #A44A3F;
--terracotta-vista-path-2: #C47451;
--terracotta-vista-path-3: #E69F71;
--terracotta-vista-path-4: #F7D08A;
--terracotta-vista-path-5: #FDF7DC;
}theme: {
extend: {
colors: {
"terracotta-vista-path": {
1: "#A44A3F",
2: "#C47451",
3: "#E69F71",
4: "#F7D08A",
5: "#FDF7DC",
}
}
}
}Palette colors
Accessibility
Similar palettes