Back to palettes

Palette

Sun-Drenched Patio

Warm and inviting tones of sun-baked stone and golden light on an outdoor patio.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sun-Drenched Patio 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 Sun-Drenched Patio.

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

Data visualization

#FFDAB9#F0E68C#FFCC99#DAA520#B8860B

Palette guide

How to use Sun-Drenched Patio

Overview

The Sun-Drenched Patio palette brings forth warm and inviting tones of sun-baked stone and golden light, perfect for creating a cozy, natural ambiance. This collection, featuring the soft peach of `#FFDAB9`, the subtle gold of `#F0E68C`, and richer hues like `#DAA520` and `#B8860B`, is ideal for designs seeking a grounded yet elegant feel. Developers and designers will find these colors versatile for evoking comfort and warmth, whether in digital interfaces or physical products. The gentle `#FFCC99` adds an extra layer of inviting warmth, making the palette suitable for projects that prioritize a welcoming and sophisticated user experience.

Best used for

  • Home decor and furnishing brands
  • Outdoor living product catalogs
  • Natural skincare and wellness packaging
  • Rustic cafe or restaurant branding
  • Cozy blog or website themes
  • Autumnal event invitations

Suggested color roles

primary

Use `#DAA520` for main headings or brand elements to establish a rich, inviting presence.

secondary

Apply `#FFCC99` for background sections or secondary content areas to maintain warmth and softness.

accent

Employ `#B8860B` for deep accents, important call-to-action buttons, or grounding elements.

background

Utilize `#FFDAB9` as a light, airy base for web pages or print, ensuring a bright and open feel.

text

Dark brown or charcoal work best for body text. For headings on light backgrounds, `#DAA520` or `#B8860B` provide excellent readability.

Accessibility notes

  • Ensure good contrast for text on lighter colors like `#FFDAB9`, `#F0E68C`, and `#FFCC99` by using dark text.
  • Avoid pairing `#FFDAB9` text on `#FFCC99` backgrounds or vice versa, as contrast will be insufficient.
  • The deeper tones like `#DAA520` and `#B8860B` offer better contrast for text when used on lighter palette colors.
  • For interactive elements, ensure distinct visual cues beyond color, especially with similar light hues.

Recommended combinations

Warm Earth

Excellent for conveying grounded elegance in branding or sophisticated web footers.

#DAA520 · #B8860B · #FFCC99

Sunny Hues

Ideal for creating light, inviting backgrounds or header sections with a touch of warmth.

#FFDAB9 · #F0E68C · #DAA520

Golden Accent

Perfect for subtle highlighting of content, decorative elements, or secondary information.

#B8860B · #FFCC99 · #F0E68C

CSS variables

:root {
  --sun-drenched-patio-1: #FFDAB9;
  --sun-drenched-patio-2: #F0E68C;
  --sun-drenched-patio-3: #FFCC99;
  --sun-drenched-patio-4: #DAA520;
  --sun-drenched-patio-5: #B8860B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sun-drenched-patio": {
        1: "#FFDAB9",
        2: "#F0E68C",
        3: "#FFCC99",
        4: "#DAA520",
        5: "#B8860B",
      }
    }
  }
}

Related searches

warm gold color schemepatio inspired palettenatural earth tones brandinginviting cozy colorssun baked aesthetic design

Palette colors

Hex values

Color 1#FFDAB9
·
Color 2#F0E68C
·
Color 3#FFCC99
·
Color 4#DAA520
·
Color 5#B8860B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.7:1Fail
2.5:1Fail
2
1:1Fail
1.1:1Fail
1.7:1Fail
2.5:1Fail
3
1.1:1Fail
1.1:1Fail
1.5:1Fail
2.2:1Fail
4
1.7:1Fail
1.7:1Fail
1.5:1Fail
1.5:1Fail
5
2.5:1Fail
2.5:1Fail
2.2:1Fail
1.5:1Fail

Similar palettes

More like Sun-Drenched Patio

View all warm