WGSN and Coloro named Transformative Teal (Coloro 092-37-14) their 2026 Colour of the Year. Their forecast offers a blue-green direction across consumer categories; it does not show that software teams are broadly replacing blue with teal. This article tests what a teal direction could do in a product interface instead.
The five sRGB HEX values below are ColorIndicator’s original design palette. They are not the official digital specification or a conversion of Coloro 092-37-14. Use them as a starting point for interface tokens, then check the exact pairings in your own product.
Why teal can work in a product interface
- A distinct anchor: Deep mineral teal can separate a product identity from familiar blues without claiming that color alone creates trust. Brand meaning depends on context, typography and the rest of the experience.
- Clear light-theme hierarchy: #0A4D5C can serve as readable text or an action fill against the tested white and pale-mint surfaces below.
- A useful dark-theme counterpart: Bright seafoam can work as text or a link on abyssal slate, but the same accent is too light to be readable on the mint canvas.
A five-color teal palette for UI tokens
These values can be assigned to CSS variables, a Figma library or a Tailwind theme. Give each swatch a role before using it: a decorative accent is not automatically suitable for text, a control outline or a focus indicator.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Mineral Teal | #0A4D5C | 10, 77, 92 | 191°, 80%, 20% | Primary actions, headings, brand marks |
| --color-accent-highlight | Seafoam Mint | #5EEAD4 | 94, 234, 212 | 171°, 77%, 64% | Text on dark surfaces; decorative accents elsewhere |
| --color-surface-light | Soft Mint Canvas | #F0F8F7 | 240, 248, 247 | 173°, 36%, 96% | Light canvas and cards |
| --color-border-subtle | Frosted Aqua | #D1EAE7 | 209, 234, 231 | 173°, 37%, 87% | Decorative dividers, not the sole control boundary |
| --color-surface-dark | Abyssal Slate | #0B1619 | 11, 22, 25 | 193°, 39%, 7% | Dark canvas and footer surfaces |
Have a product screenshot or moodboard? Analyze the image to extract its actual colors before choosing tokens. For another separate teal direction, explore the existing Vector Teal palette; it uses different HEX values from this article.
WCAG contrast: measure the exact pairing
WCAG contrast compares the relative luminance of the lighter and darker sRGB colors as (Llighter + 0.05) / (Ldarker + 0.05). These ratios come from the listed HEX values, not from a general impression that teal is accessible.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #0A4D5C / #FFFFFF | 9.42:1 | AAA | AAA | Exceeds 3:1 where required |
| #0A4D5C / #F0F8F7 | 8.74:1 | AAA | AAA | Exceeds 3:1 where required |
| #0A4D5C / #5EEAD4 | 6.37:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #5EEAD4 / #0B1619 | 12.42:1 | AAA | AAA | Exceeds 3:1 where required |
For text, WCAG AA requires at least 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Essential non-text parts of active controls and visual states need 3:1 against adjacent colors under WCAG 1.4.11; inactive controls are exempt from that criterion. Those checks are different from testing a button label.
Seafoam #5EEAD4 against the light canvas #F0F8F7 measures only 1.37:1; frosted aqua #D1EAE7 against that canvas is 1.17:1. Do not use either as the sole visible cue for an essential control there. White text on seafoam is also only 1.48:1. Check actual labels, hover states, focus indicators and borders with the Contrast Checker before release, and use non-color cues where state or meaning would otherwise rely on hue alone.
Light and dark token roles
In a light theme, use soft mint for the canvas, white for raised cards and deep mineral teal for main text or primary action fills. Frosted aqua can separate decorative sections; choose a stronger edge or an additional cue if a boundary must identify an input or control.
In dark mode, start with abyssal slate and use seafoam for text or links only where the tested #5EEAD4 / #0B1619 pair applies. Avoid deep teal body text on the slate surface. Test each interactive state separately; a passing text pair does not certify the entire theme.
CSS custom properties to start from
--color-canvas: #F0F8F7;and--color-surface: #FFFFFF;for the light foundation.--color-text-main: #0B1619;and--color-brand-primary: #0A4D5C;for readable structure.--color-brand-primary-hover: #073B47;for a darker hover fill; recheck the text placed on it.--color-border-subtle: #D1EAE7;for decorative separation, not an essential form-field outline.
Frequently asked questions
Is this the official HEX code for Transformative Teal?
No. WGSN and Coloro named Transformative Teal their 2026 Colour of the Year and identify it with Coloro code 092-37-14. The five HEX values in this article are an original ColorIndicator palette for digital interfaces, not an official conversion of that Coloro shade.
Does deep mineral teal meet WCAG AAA for normal text?
The specific #0A4D5C and #FFFFFF pair measures 9.42:1; #0A4D5C on #F0F8F7 measures 8.74:1. Both exceed the 7:1 AAA threshold for normal text. Other colors, surfaces and interaction states still need their own checks.
Can seafoam mint be used as text on a light canvas?
Not against the soft mint canvas in this palette: #5EEAD4 on #F0F8F7 measures only 1.37:1. Use it decoratively on light surfaces, or pair it with the dark #0B1619 surface, where it measures 12.42:1.
How should I use teal in dark mode?
Start with #0B1619 as the dark surface and #5EEAD4 for text or links where that exact 12.42:1 pair applies. Check focus indicators, controls and adjacent colors separately, and do not rely on hue alone to communicate state.
Where can I convert these HEX colors and check contrast?
ColorIndicator’s HEX to RGB Converter displays RGB and HSL values. Its Contrast Checker measures the specific foreground and background colors you enter.
To inspect a code, use the HEX to RGB Converter, which also displays HSL. To validate the foreground and background in your own interface, open the Contrast Checker.