Palette

Urban Espresso Shot

Robust and grounded, like a strong espresso served in a chic urban coffee shop.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Espresso Shot 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 Urban Espresso Shot.

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

Data visualization

#3E2723#5D4037#795548#BCAAA4#EFEBE9

Palette guide

How to use Urban Espresso Shot

Overview

The Urban Espresso Shot palette delivers a robust and grounded collection of browns and off-whites, reminiscent of a strong espresso in a chic urban setting. This palette is perfect for designers seeking a modern, minimalist aesthetic with a touch of warmth. It features the deep, anchoring #3E2723, a versatile mid-brown #795548, and the airy #EFEBE9. Developers will find these hex codes straightforward to implement for creating clean, sophisticated user interfaces that convey reliability and understated elegance. The contrast between the rich browns and the soft off-white like #EFEBE9 ensures excellent readability, making it suitable for both extensive text content and striking visual elements. The blend offers a professional yet inviting feel, adaptable across various digital and print applications.

Best used for

Modern cafe branding and web design
Minimalist e-commerce platforms
Professional corporate websites
Editorial design for design or architecture firms
Mobile apps with a clean, sophisticated interface
Packaging for high-quality, artisan products

Suggested color roles

primary

Utilize #3E2723 for dominant elements like navigation, headers, or impactful backgrounds, establishing a strong, elegant base.

secondary

Apply #5D4037 for subheadings, secondary buttons, or larger content sections, providing a smooth transition from the primary.

accent

Use #795548 sparingly for interactive elements, call-to-action buttons, or subtle graphic details to draw attention without being overwhelming.

background

Employ #EFEBE9 as a clean, soft background, offering excellent contrast for darker text and a bright, modern feel.

text

Choose #3E2723 for body text on light backgrounds like #EFEBE9 to ensure maximum readability and maintain a cohesive, sophisticated look.

Accessibility notes

Ensure high contrast for #3E2723 text on #EFEBE9 background (WCAG AA compliant).
Avoid using #BCAAA4 for small text on #EFEBE9 as contrast may be too low for readability.
Large text in #795548 on #EFEBE9 offers good readability and a soft aesthetic.
For critical information, always prioritize the darkest color, #3E2723, against the lightest, #EFEBE9.

Recommended combinations

Modern Contrast

A sharp, modern combination for primary branding, with deep brown for text, off-white for backgrounds, and a mid-brown for accents.

#3E2723 · #EFEBE9 · #795548

Soft Sophistication

Ideal for a gentler, more inviting feel, pairing a warm mid-brown with light neutrals for content blocks or secondary pages.

#5D4037 · #BCAAA4 · #EFEBE9

Grounded Elegance

Emphasizes depth and clarity, using the darkest brown as a primary color, a slightly lighter brown for secondary, and the lightest for background.

#3E2723 · #5D4037 · #EFEBE9

CSS variables

:root {
  --urban-espresso-shot-1: #3E2723;
  --urban-espresso-shot-2: #5D4037;
  --urban-espresso-shot-3: #795548;
  --urban-espresso-shot-4: #BCAAA4;
  --urban-espresso-shot-5: #EFEBE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-espresso-shot": {
        1: "#3E2723",
        2: "#5D4037",
        3: "#795548",
        4: "#BCAAA4",
        5: "#EFEBE9",
      }
    }
  }
}

Hex values

Color 1#3E2723

Color 2#5D4037

Color 3#795548

Color 4#BCAAA4

Color 5#EFEBE9

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

6.2:1AA

11.7:1AAA

1.5:1Fail

1.4:1Fail

4.2:1AA18

7.9:1AAA

2.1:1Fail

1.4:1Fail

2.9:1Fail

5.5:1AA

6.2:1AA

4.2:1AA18

2.9:1Fail

1.9:1Fail

11.7:1AAA

7.9:1AAA

5.5:1AA

1.9:1Fail

Similar palettes

More like Urban Espresso Shot

View all neutral

Urban Espresso Blend

Concrete Jungle Bloom