Back to palettes

Palette

Parisian Cafe Morning

Warm, inviting browns and creams reminiscent of fresh coffee and pastries in a sunlit Parisian cafe.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Parisian Cafe Morning 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 Parisian Cafe Morning.

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

Data visualization

#C4A286#8B6E59#6B4E3E#D2B48C#E1D9C0

Palette guide

How to use Parisian Cafe Morning

Overview

The Parisian Cafe Morning palette captures the serene elegance of a French dawn, blending warm browns and inviting creams. It features the rich, grounding #6B4E3E, a versatile mid-tone #8B6E59, and the lighter, airy #C4A286. Complementing these are the soft tan of #D2B48C and the gentle cream of #E1D9C0, creating a harmonious and comforting atmosphere. This palette is ideal for designers seeking to evoke a sense of calm, natural warmth, and understated sophistication. Developers can use these hex codes to craft welcoming user interfaces for hospitality, artisanal goods, or lifestyle platforms, ensuring a consistent and appealing visual experience that feels both classic and fresh.

Best used for

  • Artisanal food branding
  • Boutique hotel websites
  • Cozy blog themes
  • Handcrafted product packaging
  • Wellness and self-care apps
  • Traditional patisserie design

Suggested color roles

primary

Use #8B6E59 as a foundational color for main elements, imparting a sense of warmth and reliability.

secondary

Apply #C4A286 for supporting sections, lighter backgrounds, or secondary navigation.

accent

Reserve #6B4E3E for impactful calls to action, important icons, or to add deep contrast and sophistication.

background

Employ #E1D9C0 as a clean, soft background, providing excellent readability for darker text.

text

Utilize #6B4E3E for primary body text and headlines on light backgrounds for optimal clarity.

Accessibility notes

  • Ensure #6B4E3E text on #E1D9C0 background meets WCAG AA contrast standards for all content.
  • Lighter tones like #C4A286 and #D2B48C may require darker text (e.g., #6B4E3E) for readability.
  • Avoid using #C4A286 text on #D2B48C for small fonts as their contrast might be insufficient.
  • For larger display text, #8B6E59 offers good contrast against #E1D9C0, enhancing visual hierarchy.

Recommended combinations

Warm Comfort

Ideal for high-contrast text and background, with a warm mid-tone for interactive elements.

#E1D9C0 · #6B4E3E · #8B6E59

Natural Blend

Soft, complementary tones for layered backgrounds, subtle branding, or image overlays.

#D2B48C · #C4A286 · #E1D9C0

Deep Earthy

Excellent for headers, footers, and sections requiring depth and an inviting, natural feel.

#6B4E3E · #8B6E59 · #C4A286

CSS variables

:root {
  --parisian-cafe-morning-1: #C4A286;
  --parisian-cafe-morning-2: #8B6E59;
  --parisian-cafe-morning-3: #6B4E3E;
  --parisian-cafe-morning-4: #D2B48C;
  --parisian-cafe-morning-5: #E1D9C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "parisian-cafe-morning": {
        1: "#C4A286",
        2: "#8B6E59",
        3: "#6B4E3E",
        4: "#D2B48C",
        5: "#E1D9C0",
      }
    }
  }
}

Related searches

warm coffee shades palettecozy brown cream schemenatural parisian colorsinviting cafe web designrustic elegant palette

Palette colors

Hex values

Color 1#C4A286
·
Color 2#8B6E59
·
Color 3#6B4E3E
·
Color 4#D2B48C
·
Color 5#E1D9C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.2:1AA18
1.2:1Fail
1.7:1Fail
2
2:1Fail
1.6:1Fail
2.4:1Fail
3.3:1AA18
3
3.2:1AA18
1.6:1Fail
3.8:1AA18
5.3:1AA
4
1.2:1Fail
2.4:1Fail
3.8:1AA18
1.4:1Fail
5
1.7:1Fail
3.3:1AA18
5.3:1AA
1.4:1Fail

Similar palettes

More like Parisian Cafe Morning

View all warm