Benjamin Moore named Webster Green HC-130 its 2027 Color of the Year. Sherwin-Williams selected Celery SW 6421 for 2027. These are interior-paint announcements, not evidence that enterprise software has broadly moved from blue to green. They do, however, offer a timely starting point for asking how a forest-green visual direction could work in a data-dense interface.
The five sRGB values in this guide are original ColorIndicator screen tokens, not official digital conversions of either paint. Deep pine can be a deliberate alternative to a blue interface anchor, but color alone does not create trust or convey sustainability. Typography, labels, states and the product experience carry those meanings. For a lighter botanical direction, compare Matcha & Muted Sage; for a cooler green-blue option, see Transformative Teal.
Why deep pine can anchor an enterprise interface
- Light-surface structure: #163E2E measures 11.91:1 on white and 11.16:1 on #F6F8F6. Both exceed AAA for normal text on those exact surfaces.
- A separate mint accent: #52B788 reaches only 2.47:1 on white and 2.32:1 on #F6F8F6. Do not use it as text on either surface or as the only necessary visual cue for a control.
- Dark-theme inversion: #163E2E on #0B1A14 drops to 1.50:1. On that dark canvas, #52B788 reaches 7.24:1 for text and links, while #F6F8F6 reaches 16.79:1 for body copy.
A five-color deep pine palette for UI tokens
Give every swatch a defined role before adding it to a component library. Test the rendered control, not only its token name: a passing label does not automatically verify its focus state or essential boundary.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Conifer Pine | #163E2E | 22, 62, 46 | 156°, 48%, 16% | Light-theme headings, links and primary actions |
| --color-accent-highlight | Luminous Mint | #52B788 | 82, 183, 136 | 152°, 41%, 52% | Dark-theme links; accent fill with a tested dark label |
| --color-surface-light | Alabaster Bone Canvas | #F6F8F6 | 246, 248, 246 | 120°, 12.5%, 97% | Light canvas and card surfaces |
| --color-border-subtle | Sage Whispers | #D8E2DC | 216, 226, 220 | 144°, 15%, 87% | Decorative dividers, not sole essential control boundaries |
| --color-surface-dark | Nocturnal Evergreen | #0B1A14 | 11, 26, 20 | 156°, 41%, 7% | Dark canvas and light-theme body text |
Have a brand guideline or dashboard screenshot? Analyze the image to inspect its real green distribution, or browse the Color Palettes Library for alternative starting points.
WCAG contrast: measure the exact pairing
The following WCAG 2.1 ratios come from the stated sRGB HEX values and describe only the listed foreground/background pairs. Normal text needs 4.5:1 for AA or 7:1 for AAA; large text needs 3:1 for AA or 4.5:1 for AAA. A passing pair does not certify a full theme.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #0B1A14 / #FFFFFF | 17.92:1 | AAA | AAA | Exceeds 3:1 where required |
| #0B1A14 / #F6F8F6 | 16.79:1 | AAA | AAA | Exceeds 3:1 where required |
| #163E2E / #FFFFFF | 11.91:1 | AAA | AAA | Exceeds 3:1 where required |
| #163E2E / #F6F8F6 | 11.16:1 | AAA | AAA | Exceeds 3:1 where required |
| #52B788 / #0B1A14 | 7.24:1 | AAA | AAA | Exceeds 3:1 where required |
| #52B788 / #FFFFFF | 2.47:1 | Below AA | Below AA | Below 3:1 if essential |
| #52B788 / #F6F8F6 | 2.32:1 | Below AA | Below AA | Below 3:1 if essential |
| #163E2E / #0B1A14 | 1.50: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.
#52B788 is not readable text on white or #F6F8F6. A solid mint badge could instead carry #0B1A14 text—the same 7.24:1 color pair tested above—but check whether the badge also needs a distinct boundary on its surrounding surface. Use #163E2E for light-theme text and links, not dark-mode body copy on #0B1A14.
#D8E2DC measures 1.24:1 on #F6F8F6 and 1.33:1 on white, so keep it decorative rather than the sole necessary outline of an active input. Disabled controls are exempt from SC 1.4.11; test active and focused states separately. The deeper #0F2E22 hover token reaches 14.64:1 on white and 13.72:1 on #F6F8F6.
Check exact component pairs in the Contrast Checker. Inspect RGB and HSL values with the HEX to RGB Converter; passing text contrast does not replace a full interaction-state review.
Light and dark token roles
For a light theme, begin with #F6F8F6 canvas, white cards, #0B1A14 body text and #163E2E actions or headings. On white, those text pairs measure 17.92:1 and 11.91:1 respectively. In dark mode, use #0B1A14 canvas, #F6F8F6 body text (16.79:1), and #52B788 as the brighter tested link or accent token (7.24:1). Do not assume that decorative dividers or icon states inherit these results.
For a warm, non-botanical alternative, compare Rich Espresso in Modern UI Design. The green emphasis here is an interface choice, not a claim about a user’s emotional response.
CSS custom properties to start from
:root { --color-canvas: #F6F8F6; --color-surface: #FFFFFF; --color-text-main: #0B1A14; --color-brand-primary: #163E2E; }for the light foundation.--color-brand-primary-hover: #0F2E22; --color-accent-fill: #52B788; --color-text-on-accent: #0B1A14; --color-border-subtle: #D8E2DC;for separate interaction and decorative roles.[data-theme="dark"] { --color-canvas: #0B1A14; --color-text-main: #F6F8F6; --color-brand-primary: #52B788; }as a dark starting point; test the actual component states.
Frequently asked questions
Are these official HEX conversions of Webster Green or Celery?
No. Benjamin Moore Webster Green HC-130 and Sherwin-Williams Celery SW 6421 are separate architectural paint references. The five sRGB values here are original ColorIndicator screen tokens, not official conversions of either paint.
Does #163E2E meet WCAG AAA for text on light surfaces?
For the tested pairs, #163E2E measures 11.91:1 on white and 11.16:1 on #F6F8F6, exceeding the 7:1 AAA threshold for normal text. Other states and surfaces need their own checks.
Can #52B788 be used as button text on a light card?
Not on the tested light surfaces: it measures 2.47:1 on white and 2.32:1 on #F6F8F6, below even the 3:1 AA threshold for large text. Use a darker text token, or use #52B788 as a solid fill with a tested dark label.
Where can I convert these HEX values and check contrast?
The ColorIndicator HEX to RGB Converter shows RGB and HSL; the Contrast Checker tests exact text, fill, border and surface pairs.
Convert these colors in the HEX to RGB Converter, then test the real foreground/background pair in the Contrast Checker.