Back to palettes

Palette

Shabby Chic

Faded, muted tones that capture the gentle, romantic feel of worn-out elegance and rustic charm.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shabby Chic 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 Shabby Chic.

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

Data visualization

#F0F0D8#DCDCDC#E6E0C0#B0C4DE#D3D3D3

Palette guide

How to use Shabby Chic

Overview

The "Shabby Chic" palette embodies gentle romance and rustic elegance through its collection of faded, muted tones. This serene array includes a soft cream #F0F0D8, a classic light gray #DCDCDC, and a warm beige #E6E0C0. The subtle addition of a dusty periwinkle #B0C4DE introduces a touch of vintage charm and understated color, while another versatile light gray #D3D3D3 provides further depth. This palette is perfect for creating designs that feel calm, sophisticated, and inviting, reminiscent of worn-out treasures and cozy, elegant spaces.

Best used for

  • Home decor and interior design blogs
  • Wedding invitations and stationery
  • Boutique product packaging
  • Gentle lifestyle branding
  • Vintage-inspired photography backdrops
  • Serene user interfaces for wellness apps

Suggested color roles

primary

#E6E0C0 (warm beige). A comforting and versatile base, ideal for large background areas or dominant sections in a design.

secondary

#DCDCDC (light gray). Use this neutral for supporting elements, secondary panels, or subtle structural components.

accent

#B0C4DE (dusty periwinkle). Deploy this soft blue for delicate highlights, decorative borders, or gentle calls to action.

background

#F0F0D8 (soft cream). An airy, almost-white canvas that enhances the palette's light and faded aesthetic.

text

A dark charcoal or deep brown for readability, or use a very dark gray like #333333 for a softer contrast.

Accessibility notes

  • Most colors in this palette are very light; ensure text has sufficient contrast by using dark text (e.g., charcoal).
  • Avoid using any of the palette's colors for text on each other as contrast will likely be too low.
  • For interactive elements, ensure hover/focus states provide a clear visual change.
  • Consider a slightly darker neutral gray, not in the palette, for body text on #F0F0D8 for optimal readability.

Recommended combinations

Gentle Foundation

Excellent for creating a soft, layered background effect in web layouts.

#F0F0D8 · #E6E0C0 · #DCDCDC

Romantic Touch

Ideal for subtle branding elements or decorative motifs in stationery.

#E6E0C0 · #B0C4DE · #D3D3D3

Understated Elegance

Effective for clean, minimal UI designs where softness is key.

#DCDCDC · #F0F0D8 · #B0C4DE

CSS variables

:root {
  --shabby-chic-1: #F0F0D8;
  --shabby-chic-2: #DCDCDC;
  --shabby-chic-3: #E6E0C0;
  --shabby-chic-4: #B0C4DE;
  --shabby-chic-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shabby-chic": {
        1: "#F0F0D8",
        2: "#DCDCDC",
        3: "#E6E0C0",
        4: "#B0C4DE",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

shabby chic color schemesoft vintage palettemuted romantic colorselegant neutral tonesfaded pastel design

Palette colors

Hex values

Color 1#F0F0D8
·
Color 2#DCDCDC
·
Color 3#E6E0C0
·
Color 4#B0C4DE
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.3:1Fail
2
1.2:1Fail
1:1Fail
1.3:1Fail
1.1:1Fail
3
1.2:1Fail
1:1Fail
1.3:1Fail
1.1:1Fail
4
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.2:1Fail
5
1.3:1Fail
1.1:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Shabby Chic

View all neutral
Faded Linen Comfort
Vintage Tea Stain
Aged Papyrus Scrolls
Aged Parchment Pages
Ancient Library Binding
Ancient Tome Patina