Back to palettes

Palette

Terra Cotta Bloom

Warm and inviting, these shades echo sunbaked clay pots nurturing vibrant, hardy desert blooms.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terra Cotta Bloom reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Terra Cotta Bloom.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#F8B400#F08A4B#DC5F5F#C23D5F#972D57

Palette guide

How to use Terra Cotta Bloom

Overview

The Terra Cotta Bloom palette presents a vibrant and inviting spectrum, transitioning from sunny yellow-orange to deep, rich berry tones. Anchored by the bright #F8B400 and deepening into the passionate #C23D5F and #972D57, this collection is perfect for designs aiming for a lively yet grounded aesthetic. It evokes sunbaked clay pots nurturing vibrant desert flora, offering a dynamic range for both playful and sophisticated applications. Designers and developers can leverage the warmth of #F08A4B and the striking #DC5F5F to create engaging interfaces that feel both natural and energetic.

Best used for

  • Creative branding for artisanal products
  • Event promotion graphics and websites
  • Fashion or lifestyle blogs with a bold aesthetic
  • Mobile game interfaces requiring warmth and energy
  • Food and beverage packaging design
  • Digital art or illustration projects

Suggested color roles

primary

Use #DC5F5F for main calls to action, offering a striking yet approachable central hue.

secondary

Apply #F08A4B for supporting elements or secondary buttons, bringing a softer, warm glow.

accent

Reserve #F8B400 for bright highlights, warnings, or interactive elements that need to pop.

background

Consider #972D57 for deep, luxurious backgrounds, or a very light cream for content areas.

text

A deep charcoal or black works well on #F8B400 and #F08A4B; white is effective on #C23D5F and #972D57.

Accessibility notes

  • #F8B400 requires dark text (e.g., black or #972D57) to meet WCAG AA contrast standards.
  • Ensure sufficient contrast between #F08A4B and #DC5F5F if used adjacently for text/background.
  • Use a tool to check contrast for all text/background pairs, especially with the vibrant #DC5F5F.
  • Provide alternative visual cues for interactive states, as several colors have similar lightness values.

Recommended combinations

Sunset Glow

Creates a vibrant, warm gradient for headers, banners, or introductory sections.

#F8B400 · #F08A4B · #DC5F5F

Desert Bloom

Excellent for a sophisticated, deep color block effect, ideal for navigation or footers.

#DC5F5F · #C23D5F · #972D57

Energetic Contrast

The deep base with bright accents is perfect for dashboards or data visualizations.

#972D57 · #F8B400 · #F08A4B

CSS variables

:root {
  --terra-cotta-bloom-3-1: #F8B400;
  --terra-cotta-bloom-3-2: #F08A4B;
  --terra-cotta-bloom-3-3: #DC5F5F;
  --terra-cotta-bloom-3-4: #C23D5F;
  --terra-cotta-bloom-3-5: #972D57;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-bloom-3": {
        1: "#F8B400",
        2: "#F08A4B",
        3: "#DC5F5F",
        4: "#C23D5F",
        5: "#972D57",
      }
    }
  }
}

Related searches

warm desert color schemeterracotta gradient palettevibrant earthy tonesred orange purple hexbloom inspired UI colors

Palette colors

Hex values

Color 1#F8B400
·
Color 2#F08A4B
·
Color 3#DC5F5F
·
Color 4#C23D5F
·
Color 5#972D57
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
2.8:1Fail
4.1:1AA18
2
1.4:1Fail
1.4:1Fail
2:1Fail
3:1Fail
3
2:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
4
2.8:1Fail
2:1Fail
1.4:1Fail
1.5:1Fail
5
4.1:1AA18
3:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Terra Cotta Bloom

View all earth
Earthy Clay Bloom
Sunbaked Clay Pot
Terra Cotta Sunbaked
Terracotta Pot Warmth
Arid Cactus Blossom
Artisan Clay Kiln