Palette

Mirage Spring Bloom

The vibrant surprise of life and color found within a lush oasis amidst a vast, arid desert.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mirage Spring 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 Mirage Spring Bloom.

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

Data visualization

#007369#FFCC2C#BF5B3A#E0D7B2#2E475C

Palette guide

How to use Mirage Spring Bloom

Overview

The 'Mirage Spring Bloom' palette delivers the vibrant surprise of life found within a lush oasis amidst a desert. This unique collection, featuring grounding #007369, bold #FFCC2C, and rustic #BF5B3A, offers designers a powerful foundation for projects seeking unexpected energy and natural contrast. The interplay between the earthy #E0D7B2 and the deep #2E475C allows for sophisticated visual depth and storytelling. Developers can leverage these distinct hex codes to create memorable user interfaces, impactful branding, or any project aiming for a blend of natural vibrancy, rugged elegance, and energetic presence.

Best used for

Desert-themed adventure brands
Artisan and handcrafted goods
Cultural event promotions
Unique restaurant branding
Travel and exploration websites
Sustainable fashion with earthy tones

Suggested color roles

primary

A deep, rich teal (#007369), serving as a sophisticated primary color for brand elements and navigation, evoking an oasis.

secondary

A warm, earthy beige (#E0D7B2), ideal for backgrounds, subtle textures, or supporting elements, providing a natural canvas.

accent

A vibrant, sunny yellow (#FFCC2C), perfect for impactful calls-to-action, highlights, or energetic iconography, representing bloom.

background

A muted, cool gray-blue (#2E475C), providing a strong, sophisticated backdrop that allows warmer colors to pop, reminiscent of desert nights.

text

For optimal readability, use #2E475C or black for body text. For headings, #007369 works well against lighter backgrounds, and #FFCC2C for accents.

Accessibility notes

Ensure sufficient contrast when using #E0D7B2 as a background; darker text like #2E475C or black is essential.
The vibrant #FFCC2C requires a dark text color (e.g., #2E475C or black) to meet WCAG AA standards.
Pair #007369 and #2E475C with #E0D7B2 for strong, readable combinations.
Avoid using #BF5B3A for small text against #2E475C as contrast might be insufficient for some users.

Recommended combinations

Desert Bloom

Creates a warm, vibrant focal point against a light desert-inspired background, perfect for hero sections.

#E0D7B2 · #FFCC2C · #BF5B3A

Oasis Depths

Provides a sophisticated, deep background with a rich primary and a contrasting light accent for content.

#2E475C · #007369 · #E0D7B2

Rugged Energy

Suitable for content blocks or branding that needs a cohesive blend of earthy, vibrant, and grounding tones.

#007369 · #BF5B3A · #FFCC2C

CSS variables

:root {
  --mirage-spring-bloom-1: #007369;
  --mirage-spring-bloom-2: #FFCC2C;
  --mirage-spring-bloom-3: #BF5B3A;
  --mirage-spring-bloom-4: #E0D7B2;
  --mirage-spring-bloom-5: #2E475C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mirage-spring-bloom": {
        1: "#007369",
        2: "#FFCC2C",
        3: "#BF5B3A",
        4: "#E0D7B2",
        5: "#2E475C",
      }
    }
  }
}

Hex values

Color 1#007369

Color 2#FFCC2C

Color 3#BF5B3A

Color 4#E0D7B2

Color 5#2E475C

Accessibility

Contrast checker

3.8:1AA18

1.3:1Fail

4:1AA18

1.7:1Fail

3.8:1AA18

2.9:1Fail

1:1Fail

6.4:1AA

1.3:1Fail

2.9:1Fail

3:1AA18

2.2:1Fail

4:1AA18

1:1Fail

3:1AA18

6.7:1AA

1.7:1Fail

6.4:1AA

2.2:1Fail

6.7:1AA

Similar palettes

More like Mirage Spring Bloom

Spiced Bazaar Delight