Benjamin Moore selected Silhouette AF-655, a shade it describes as rich espresso with charcoal notes, for its 2026 Color of the Year. Separately, Sherwin-Williams selected Plum Brown SW 6272 for October 2026, describing it as a deep purple with neutral undertones. These paint choices are interior-design references—not proof of widespread espresso-colored software interfaces, and not identical hues. They suggest a useful question for UI teams: can warm dark neutrals provide a readable alternative to pure black or cool slate?
The five sRGB values below are original ColorIndicator screen tokens, not official conversions of either architectural paint. For wider autumn inspiration, see the Fall Color Palette Guide; for a golden-ochre system, compare Amber Haze in Modern UI Design.
Why espresso can act as a structural UI neutral
- A warm anchor for light surfaces: #261712 measures 17.30:1 against white and 16.34:1 against #FBF8F4, exceeding AAA for normal-size text on those exact backgrounds.
- A separate crema accent: #D48B47 reaches only 2.77:1 against white and 2.62:1 against #FBF8F4. It is not suitable as text there, or as an essential unbordered boundary. #261712 text on that fill reaches 6.25:1.
- Inverted roles in dark mode: #261712 on #180F0B drops to 1.09:1. Use #D48B47 for dark-theme interactive text on that tested canvas; the pair reaches 6.82:1.
A five-color espresso palette for UI tokens
Assign each screen color a distinct role. Decorative dividers and mid-tone accent fills need separate testing before becoming essential text, controls or focus indicators.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Roasted Espresso | #261712 | 38, 23, 18 | 15°, 36%, 11% | Primary actions, headings and body copy on light surfaces |
| --color-accent-highlight | Warm Crema Amber | #D48B47 | 212, 139, 71 | 29°, 62%, 55% | Dark-theme links; light-theme fill with tested dark text |
| --color-surface-light | Soft Oat Canvas | #FBF8F4 | 251, 248, 244 | 34°, 47%, 97% | Light canvas and raised cards |
| --color-border-subtle | Steamed Almond | #E8DFD5 | 232, 223, 213 | 32°, 29%, 87% | Decorative dividers, not the sole control boundary |
| --color-surface-dark | Espresso Noir | #180F0B | 24, 15, 11 | 18°, 37%, 7% | Dark canvas and text on #D48B47 |
Have a product screenshot or brand moodboard? Analyze your image to extract its actual colors, or browse the Color Palettes Library for other systems.
WCAG contrast: measure the exact pairing
The ratios below come from the stated sRGB HEX codes and apply to specific foreground/background pairs. They do not certify an entire application or every component state.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #180F0B / #FFFFFF | 18.88:1 | AAA | AAA | Exceeds 3:1 where required |
| #180F0B / #FBF8F4 | 17.84:1 | AAA | AAA | Exceeds 3:1 where required |
| #261712 / #FFFFFF | 17.30:1 | AAA | AAA | Exceeds 3:1 where required |
| #261712 / #FBF8F4 | 16.34:1 | AAA | AAA | Exceeds 3:1 where required |
| #D48B47 / #180F0B | 6.82:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #261712 / #D48B47 | 6.25:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #D48B47 / #FFFFFF | 2.77:1 | Below AA | Below AA | Below 3:1 if essential |
| #D48B47 / #FBF8F4 | 2.62:1 | Below AA | Below AA | Below 3:1 if essential |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
#D48B47 cannot serve as readable text of any size on white or #FBF8F4. It can be a button or badge fill with #180F0B text (6.82:1) or #261712 text (6.25:1). Under SC 1.4.11, a hit-area boundary need only meet 3:1 when it is necessary to identify the control; if required, add a tested dark border. Check the focus indicator independently.
#E8DFD5 measures only 1.24:1 against #FBF8F4 and should remain a decorative divider, not the only essential input outline. Inactive controls are exempt from SC 1.4.11, but active and focused states are not. The darker #1A0F0C hover fill reaches 18.79:1 on white and 17.75:1 on #FBF8F4.
Check exact component pairs in the Contrast Checker. For channel values and HSL, use the HEX to RGB Converter. Passing text contrast alone does not guarantee a passing button, form or theme.
Light and dark token roles
In a light theme, start with #FBF8F4 canvas, white cards and #261712 headings and body text. A #261712 primary button with white text reaches 17.30:1. For a #D48B47 highlight fill, choose tested dark text rather than white (only 2.77:1). In dark mode, use #180F0B as the canvas, #FBF8F4 for body text (17.84:1), and #D48B47 for links or accent buttons with #180F0B labels (6.82:1).
For brighter warm directions, compare Persimmon in Modern UI Design and Terracotta in Modern UI Design.
CSS custom properties to start from
:root { --color-canvas: #FBF8F4; --color-surface: #FFFFFF; --color-text-main: #261712; --color-brand-primary: #261712; }for the light foundation.--color-brand-primary-hover: #1A0F0C; --color-accent-fill: #D48B47; --color-text-on-accent: #180F0B;for tested action and accent roles.--color-border-subtle: #E8DFD5; --color-dark-canvas: #180F0B; --color-dark-accent: #D48B47;as starting values; verify your actual surrounding surfaces.
Frequently asked questions
Are these official HEX conversions of Benjamin Moore Silhouette or Sherwin-Williams Plum Brown?
No. Silhouette AF-655 and Plum Brown SW 6272 are architectural paint colors cited as separate interior-design references. The five sRGB values here are an original ColorIndicator interface palette, not digital specifications for either paint.
Does Roasted Espresso meet WCAG AAA on light surfaces?
#261712 measures 17.30:1 against white and 16.34:1 against #FBF8F4, exceeding 7:1 for normal text. On #D48B47 it measures 6.25:1: AA for normal text and AAA for large text, but not AAA for normal text.
Can Warm Crema Amber be used with white text on a button?
No. White on #D48B47 measures only 2.77:1. Use #180F0B text on the amber fill (6.82:1), or #261712 text (6.25:1), and test whether the control also needs a distinct border or focus indicator.
Where can I convert these HEX codes and check contrast?
Use the ColorIndicator HEX to RGB Converter for RGB and HSL values and the Contrast Checker for exact text, fill, border and surface pairs.
Convert HEX to RGB and HSL in the HEX to RGB Converter, then test real foreground/background pairs in the Contrast Checker.