Palette

Arid Flower Vista

Soft, unexpected blooms emerge from sandy, warm desert tones, painting a delicate yet resilient vista.

Warmnatural5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arid Flower Vista 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 Flower Vista.

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

Data visualization

#F4A460#FFDAB9#FFC0CB#BC8F8F#A0522D

Palette guide

How to use Arid Flower Vista

Overview

The Arid Flower Vista palette reveals soft, unexpected blooms emerging from sandy, warm desert tones, painting a delicate yet resilient vista. This collection features inviting oranges like #F4A460 and #FFDAB9, a gentle pink #FFC0CB, a muted rose-brown #BC8F8F, and a deep, grounding brown #A0522D. It offers a balance of warmth, softness, and natural strength. Designers and developers can use these hues to create inviting, rustic, and subtly feminine experiences. The palette's ability to blend delicate floral notes with robust earth tones makes it incredibly versatile. It is perfect for projects seeking a natural, comforting, and quietly beautiful aesthetic.

Best used for

Feminine and natural beauty product branding
Cozy cafe and restaurant interiors
Wedding and event stationery
Lifestyle blogs and online magazines
Rustic home decor and textile design
Gentle and inviting digital interfaces

Suggested color roles

primary

Utilize #F4A460 as the primary color for a warm, inviting core in headers, main graphics, or key brand elements.

secondary

Employ #BC8F8F for soft, muted supporting elements, subheadings, or to add a touch of subtle sophistication.

accent

Apply #FFC0CB as a delicate, floral highlight for decorative details, icons, or to introduce a gentle pop of color.

background

Use #FFDAB9 for a light, airy background that provides a clean yet warm canvas, allowing darker content to stand out.

text

For body text, #A0522D offers a strong, earthy contrast and excellent readability on lighter backgrounds, or use a deep brown.

Accessibility notes

The very light #FFDAB9 and #FFC0CB require dark text like #A0522D for optimal readability.
Ensure sufficient contrast when pairing #BC8F8F with other mid-tones, especially for text.
Avoid using #FFC0CB for small text or critical information due to its light value.
Always verify WCAG AA compliance for all text and UI elements, particularly for contrast ratios.

Recommended combinations

Delicate Bloom

Ideal for soft branding, feminine designs, or creating an inviting and gentle visual narrative.

#FFC0CB · #FFDAB9 · #F4A460

Rustic Sands

Excellent for grounding elements, rich text, or designs that emphasize natural textures and earthy depth.

#A0522D · #BC8F8F · #F4A460

Warm Vista

Perfect for main content areas, inviting headers, or clean interfaces where a comforting, natural aesthetic is desired.

#F4A460 · #FFDAB9 · #A0522D

CSS variables

:root {
  --arid-flower-vista-1: #F4A460;
  --arid-flower-vista-2: #FFDAB9;
  --arid-flower-vista-3: #FFC0CB;
  --arid-flower-vista-4: #BC8F8F;
  --arid-flower-vista-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arid-flower-vista": {
        1: "#F4A460",
        2: "#FFDAB9",
        3: "#FFC0CB",
        4: "#BC8F8F",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#F4A460

Color 2#FFDAB9

Color 3#FFC0CB

Color 4#BC8F8F

Color 5#A0522D

Accessibility

Contrast checker

1.5:1Fail

1.3:1Fail

1.4:1Fail

2.8:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

4.3:1AA18

1.3:1Fail

1.2:1Fail

1.8:1Fail

3.7:1AA18

1.4:1Fail

2.1:1Fail

1.8:1Fail

2:1Fail

2.8:1Fail

4.3:1AA18

3.7:1AA18

2:1Fail

Similar palettes

More like Arid Flower Vista

View all Warm

Burnt Sugar Glaze

Sun Drenched Piazza

Sunbaked Terracotta Earth

Sweet Apricot Grove

Ancient Clay Vessel

Canyon Dawn Blush