Palette
Radiates the warmth of sun-drenched adobe walls, glowing in the soft light of a desert afternoon.
Preview
Interface
A quick look at how Sun-Baked Adobe 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 Adobe palette radiates the authentic warmth of sun-drenched adobe walls, glowing in the soft light of a desert afternoon. This earthy collection features a deep, grounding brown (#9B4F0F), a rich burnt orange (#C46D0A), a vibrant amber (#E6920A), a soft golden yellow (#FBBF49), and a creamy, sandy beige (#FDEED3). It's an ideal choice for designs seeking a natural, rustic, and comforting aesthetic, perfect for evoking a sense of heritage and warmth.
primary
Use #C46D0A as a warm, inviting primary color for headers, large sections, or prominent graphical elements.
secondary
Apply #9B4F0F to add a deep, grounding contrast, ideal for navigation, footers, or important textual elements.
accent
Employ #E6920A as a bright highlight, perfect for calls to action or to draw attention to key features.
background
Utilize #FDEED3 as a soft, sandy base that provides a neutral canvas for the richer, warmer tones.
text
For optimal readability, use dark brown like #9B4F0F or a deep charcoal against lighter backgrounds, or off-white text on darker shades.
Create deep, rich gradients or highlight focal points with a natural, sun-drenched feel.
#9B4F0F · #C46D0A · #E6920AIdeal for soft backgrounds, warm UI elements, or subtle branding that evokes a gentle warmth.
#FDEED3 · #FBBF49 · #C46D0AUse for strong headers, natural branding, or to create a balanced yet striking visual hierarchy.
#9B4F0F · #E6920A · #FDEED3:root {
--sun-baked-adobe-1: #9B4F0F;
--sun-baked-adobe-2: #C46D0A;
--sun-baked-adobe-3: #E6920A;
--sun-baked-adobe-4: #FBBF49;
--sun-baked-adobe-5: #FDEED3;
}theme: {
extend: {
colors: {
"sun-baked-adobe": {
1: "#9B4F0F",
2: "#C46D0A",
3: "#E6920A",
4: "#FBBF49",
5: "#FDEED3",
}
}
}
}Palette colors
Accessibility
Similar palettes