Pikka Logo Pikka
Chrome App
Dark Roasted Artisanal Coffee Brown Category: Brown

Espresso Brown (#2B1D0C) — Color Codes, Meaning & UI Palettes

Espresso Brown (#2B1D0C) is a deep, full-bodied dark brown inspired by freshly pulled crema on roasted coffee beans. It replaces sterile black with organic warmth, depth, and tactile craftsmanship.

Quick Answer (Espresso Brown Color Code): The exact HEX code for Espresso Brown is #2B1D0C. In RGB, it is rgb(43, 29, 12). In HSL, it is hsl(33deg, 56%, 11%), and its print CMYK formulation is cmyk(0%, 33%, 72%, 83%). It has a relative luminance of 0.014 and pairs best in UI design with Warm Oat Milk (#FEFAE0) and Caramel Cream (#AF6E4D).
Click to Copy HEX
Espresso Brown
#2B1D0C
HEX
#2B1D0C
RGB
rgb(43, 29, 12)
HSL
hsl(33deg, 56%, 11%)
CMYK (Print)
cmyk(0%, 33%, 72%, 83%)
Apple Display P3
color(display-p3 0.169 0.114 0.047)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 16.41:1 (AAA)
Black Text (#000000) 1.28:1 (Fail)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#FBF5EF
100
#F6ECDF
200
#EDD8BF
300
#E2C098
400
#D4A468
500
#2B1D0C
600
#24180A
700
#1C1308
800
#150E06
900
#0E0904
950
#080502

Color Harmonies & Palette Schemes

Complementary

#0C1A2C
Opposite 180° Contrast

Analogous -30°

#2C0E0C
Natural Harmony

Analogous +30°

#2A2C0C
Natural Harmony

Triadic +120°

#0C2C1E
120° Balanced Triad

Triadic +240°

#1E0C2C
120° Balanced Triad

Curated UI Design Pairings for Espresso Brown

Premium typography color and dark-mode backdrop for specialty roasters, bespoke tailoring, architectural firms, and literary journals.

Warm Oat Milk
#FEFAE0
Creamy Accessible Background
Caramel Cream
#AF6E4D
Rich Confectionery Accent
Soft Travertine
#E7DEC8
Warm Secondary Surface
Muted Terracotta
#E07A5F
Artisanal Border Element

Export Espresso Brown Code Snippets

CSS Variable --color-espresso-brown: #2B1D0C;
Tailwind Config 'espresso-brown': '#2B1D0C'
Swift / SwiftUI Color(hex: "#2B1D0C")
JSON Design Token {"name": "Espresso Brown", "hex": "#2B1D0C"}

Frequently Asked Questions About Espresso Brown (#2B1D0C)

What is the exact HEX code for Espresso Brown?

The exact HEX code for Espresso Brown is #2B1D0C. In 8-digit hexadecimal (with 100% opacity), it is #2B1D0CFF. Its RGB decimal equivalent is rgb(43, 29, 12) and its HSL value is hsl(33deg, 56%, 11%).

What colors go best with Espresso Brown in UI and web design?

Espresso Brown pairs exceptionally well with Warm Oat Milk (#FEFAE0), Caramel Cream (#AF6E4D), Soft Travertine (#E7DEC8), and Muted Terracotta (#E07A5F).

How do I use Espresso Brown in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #2B1D0C; or background-color: #2B1D0C;. In Tailwind CSS, use arbitrary value syntax like bg-[#2b1d0c] or text-[#2b1d0c], or define it in your Tailwind v4 @theme block as --color-espresso-brown: #2B1D0C;.

Is Espresso Brown WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Espresso Brown achieves a contrast ratio of 16.41:1 (AAA). Against a pure black background (#000000), it achieves 1.28:1 (Fail). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator