Palette

Desert Oasis Refuge

Warm desert sands meet cool, refreshing oasis blues, offering a serene escape in a harsh landscape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Oasis Refuge 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 Desert Oasis Refuge.

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

Data visualization

#F5E8D7#C6AE8B#8C7C5F#5D8F9A#3A6A7A

Palette guide

How to use Desert Oasis Refuge

Overview

The Desert Oasis Refuge palette offers a serene escape, blending warm desert sands with cool, refreshing oasis blues. It features a very light, airy #F5E8D7 and a comforting #C6AE8B, evoking soft, sun-kissed earth. These warm neutrals are beautifully contrasted by a grounding #8C7C5F, reminiscent of dry, ancient landscapes. The palette then introduces tranquil blues: a soft, inviting #5D8F9A and a deeper, more sophisticated #3A6A7A, capturing the essence of life-giving water. This collection is ideal for designs that aim to convey peace, stability, and a refreshing sense of calm, perfectly suited for wellness, travel, or sophisticated natural branding.

Best used for

Luxury wellness and spa retreats
Travel and tourism for serene destinations
Eco-conscious and sustainable brands
Interior design for calming, modern spaces
Web and app interfaces seeking a tranquil aesthetic
High-end natural product packaging

Suggested color roles

primary

#5D8F9A - A calming, inviting blue, perfect for main calls-to-action, prominent headings, or brand elements to evoke tranquility and trust.

secondary

#C6AE8B - A warm, comforting sand tone, excellent for supporting content, subheadings, or secondary branding, providing natural balance.

accent

#3A6A7A - This deep, sophisticated blue acts as a strong accent for interactive states, important icons, or decorative details, adding depth.

background

#F5E8D7 - A very light, airy off-white that serves as an excellent clean background, providing ample contrast and a fresh feel.

text

#3A6A7A - The deepest blue, recommended for body text and essential UI elements, ensuring strong readability against lighter colors like #F5E8D7 or #C6AE8B.

Accessibility notes

Ensure sufficient contrast between #5D8F9A (medium blue) and #3A6A7A (dark blue) when used for text.
The very light #F5E8D7 background provides excellent contrast for dark text colors like #3A6A7A or black.
Avoid using #C6AE8B or #8C7C5F as text on #F5E8D7 without careful contrast checking; they may not pass WCAG AA.
For critical content, always pair #3A6A7A or a dark charcoal with the lightest background colors in the palette.

Recommended combinations

Calm Sands & Seas

Light, airy designs combining soft sands with a refreshing blue, ideal for serene web pages or natural branding.

#F5E8D7 · #C6AE8B · #5D8F9A

Deep Refuge

Strong, sophisticated layouts with a grounding earth tone and deep blues against a light background for impact.

#8C7C5F · #3A6A7A · #F5E8D7

Oasis Harmony

Balanced compositions for detailed illustrations, luxury product showcases, or tranquil user interfaces.

#C6AE8B · #5D8F9A · #3A6A7A

CSS variables

:root {
  --desert-oasis-refuge-1: #F5E8D7;
  --desert-oasis-refuge-2: #C6AE8B;
  --desert-oasis-refuge-3: #8C7C5F;
  --desert-oasis-refuge-4: #5D8F9A;
  --desert-oasis-refuge-5: #3A6A7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-oasis-refuge": {
        1: "#F5E8D7",
        2: "#C6AE8B",
        3: "#8C7C5F",
        4: "#5D8F9A",
        5: "#3A6A7A",
      }
    }
  }
}

Hex values

Color 1#F5E8D7

Color 2#C6AE8B

Color 3#8C7C5F

Color 4#5D8F9A

Color 5#3A6A7A

Accessibility

Contrast checker

1.8:1Fail

3.4:1AA18

3:1Fail

4.9:1AA

1.8:1Fail

1.9:1Fail

1.7:1Fail

2.8:1Fail

3.4:1AA18

1.9:1Fail

1.1:1Fail

1.5:1Fail

3:1Fail

1.7:1Fail

1.1:1Fail

1.7:1Fail

4.9:1AA

2.8:1Fail

1.5:1Fail

1.7:1Fail

Similar palettes

More like Desert Oasis Refuge

Desert Oasis Refuge

See it in context.

Ready when you are.

Built with Desert Oasis Refuge.

How to use Desert Oasis Refuge

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Calm Sands & Seas

Deep Refuge

Oasis Harmony

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Oasis Refuge