Palette

Parisian Cafe Bloom

Warm and inviting tones reminiscent of an intimate Parisian cafe, serving coffee and pastries.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B38F6E#E0B499#F5DCC8#8C7164#A8816D

Palette guide

How to use Parisian Cafe Bloom

Overview

The Parisian Cafe Bloom palette offers a warm and inviting collection of sophisticated neutrals, reminiscent of an intimate Parisian cafe. Featuring soft, creamy beiges like #E0B499 and #F5DCC8, a warm mid-tone brown #B38F6E, and deeper, grounding browns #8C7164 and #A8816D, this palette is ideal for designers and developers aiming to create cozy, elegant, and natural digital experiences. It's perfect for branding cafes, artisanal bakeries, or any platform that seeks to convey comfort, authenticity, and a touch of refined simplicity. The harmonious blend of warm browns and light neutrals ensures a sophisticated aesthetic and a pleasant user experience.

Best used for

Boutique cafe branding and menus
Artisanal bakery e-commerce sites
Interior design portfolios with a rustic touch
Fashion or beauty brands emphasizing natural tones
Food photography websites or blogs
Wedding or event planning with a vintage theme

Suggested color roles

primary

Use #B38F6E as a grounding primary color for headers or content blocks, establishing a warm, stable base.

secondary

Employ #E0B499 for secondary content areas or background elements, offering a soft, inviting tone.

accent

Apply #F5DCC8 sparingly for subtle highlights, hover states, or delicate graphical elements, adding gentle luminosity.

background

The lightest shade, #F5DCC8, is excellent for main backgrounds, providing a warm, clean canvas for readability.

text

Utilize #8C7164 for primary text against #F5DCC8, ensuring excellent readability, or #A8816D for headings on #E0B499.

Accessibility notes

Ensure #8C7164 text on #F5DCC8 background meets WCAG AA contrast standards, which it generally does.
Avoid using #E0B499 or #B38F6E as text colors on #F5DCC8, as contrast will likely be insufficient.
For interactive elements, use #8C7164 or #A8816D for text/icons on lighter buttons for clear visibility.
Check contrast between #8C7164 and #A8816D if used for text/background, as they are similar in darkness.

Recommended combinations

Pastry & Coffee

Perfect for clean, readable text on a soft, warm background, ideal for product descriptions or blog content.

#F5DCC8 · #8C7164 · #E0B499

Rustic Elegance

Creates a comforting, balanced feel for navigation, sidebars, or subtle informational blocks.

#B38F6E · #A8816D · #F5DCC8

Deep Roast

Provides a rich, grounded aesthetic for footers, darker UI components, or elegant card designs.

#8C7164 · #E0B499 · #B38F6E

CSS variables

:root {
  --parisian-cafe-bloom-1: #B38F6E;
  --parisian-cafe-bloom-2: #E0B499;
  --parisian-cafe-bloom-3: #F5DCC8;
  --parisian-cafe-bloom-4: #8C7164;
  --parisian-cafe-bloom-5: #A8816D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "parisian-cafe-bloom": {
        1: "#B38F6E",
        2: "#E0B499",
        3: "#F5DCC8",
        4: "#8C7164",
        5: "#A8816D",
      }
    }
  }
}

Hex values

Color 1#B38F6E

Color 2#E0B499

Color 3#F5DCC8

Color 4#8C7164

Color 5#A8816D

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

1.4:1Fail

2.4:1Fail

1.9:1Fail

2.3:1Fail

1.4:1Fail

3.4:1AA18

2.6:1Fail

1.5:1Fail

2.4:1Fail

3.4:1AA18

1.3:1Fail

1.2:1Fail

1.9:1Fail

2.6:1Fail

1.3:1Fail

Similar palettes

More like Parisian Cafe Bloom

View all neutral

Parisian Cafe Au Lait