Palette

Arid Sands Bloom

Soft yellows and earthy browns reflecting resilient desert blooms against a sandy, arid landscape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arid Sands 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 Arid Sands Bloom.

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

Data visualization

#F0E68C#FFD700#D2B48C#8B4513#B8860B

Palette guide

How to use Arid Sands Bloom

Overview

The Arid Sands Bloom palette captures the resilient beauty of desert flora with its blend of soft yellows and earthy browns. This inviting collection, featuring the bright `#F0E68C` and vibrant `#FFD700`, alongside the grounding `#D2B48C`, is excellent for designers and developers seeking a natural, warm, and subtly energetic aesthetic. The deeper tones of `#8B4513` and `#B8860B` provide crucial contrast and depth, reminiscent of rich soil and blooming accents. This palette is particularly well-suited for projects that aim to convey organic warmth, natural resilience, or a touch of rustic charm, while still maintaining an approachable feel.

Best used for

Eco-friendly product branding and packaging
Nature-themed websites and blogs
Outdoor adventure and travel marketing
Rustic cafe or boutique interior design
Autumnal seasonal campaigns and digital ads
Children's educational content with an earthy feel

Suggested color roles

primary

Use `#D2B48C` as a warm, inviting primary color for backgrounds or main content blocks, providing an earthy base.

secondary

Employ `#F0E68C` or `#FFD700` for headers, highlights, or secondary UI elements to add a touch of natural vibrancy.

accent

Apply `#B8860B` or `#8B4513` for strong accents, calls-to-action, or important icons, ensuring clear visibility.

background

A light application of `#F0E68C` or a neutral off-white can serve as a bright, natural background, allowing deeper colors to pop.

text

For excellent readability, utilize `#8B4513` or `#B8860B` for body text and headings against lighter backgrounds.

Accessibility notes

Ensure high contrast when pairing text in `#8B4513` or `#B8860B` with lighter backgrounds like `#F0E68C` or `#D2B48C`.
Avoid using yellow tones like `#F0E68C` for small text on light backgrounds, as readability can be severely compromised.
Use a contrast checker to verify that all text and interactive elements meet WCAG guidelines, especially for lighter yellow accents.
Consider using a dark brown for all essential text to ensure consistent readability across various screen types and lighting conditions.

Recommended combinations

Sunny Sands

Great for vibrant headers, hero sections, or to highlight key features with a warm, inviting glow.

#F0E68C · #FFD700 · #D2B48C

Earthy Roots

Perfect for creating depth in footers, navigation, or for grounding elements in a natural design.

#D2B48C · #B8860B · #8B4513

Bloom & Ground

Effective for a balanced brand identity, combining vibrant accents with strong, natural base tones.

#FFD700 · #D2B48C · #8B4513

CSS variables

:root {
  --arid-sands-bloom-1: #F0E68C;
  --arid-sands-bloom-2: #FFD700;
  --arid-sands-bloom-3: #D2B48C;
  --arid-sands-bloom-4: #8B4513;
  --arid-sands-bloom-5: #B8860B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arid-sands-bloom": {
        1: "#F0E68C",
        2: "#FFD700",
        3: "#D2B48C",
        4: "#8B4513",
        5: "#B8860B",
      }
    }
  }
}

Hex values

Color 1#F0E68C

Color 2#FFD700

Color 3#D2B48C

Color 4#8B4513

Color 5#B8860B

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

5.5:1AA

2.5:1Fail

1.1:1Fail

1.4:1Fail

5.1:1AA

2.3:1Fail

1.5:1Fail

1.4:1Fail

3.6:1AA18

1.7:1Fail

5.5:1AA

5.1:1AA

3.6:1AA18

2.2:1Fail

2.5:1Fail

2.3:1Fail

1.7:1Fail

2.2:1Fail

Similar palettes

More like Arid Sands Bloom

View all earth

Desert Bloom Whisper

Desert Sunbaked Earth