Pantone included Burnished Lilac (15-1905 TCX) in its London Fashion Week Spring/Summer 2026 fashion color report. That is evidence of a fashion forecast, not evidence that SaaS or AI products have broadly adopted the color. Here we explore how a muted violet direction could work in a digital interface.
The five sRGB HEX values below form an original ColorIndicator design palette. They are not the official digital specification or a conversion of Pantone 15-1905 TCX. Treat them as testable interface tokens, not as a substitute for the Pantone color standard.
Why muted violet can work in SaaS and AI interfaces
- A distinct product accent: Smoky plum can give a dashboard or assistant feature a recognizable visual role. It does not make a product feel trustworthy or intelligent on its own; meaning comes from the full interface and its context.
- Readable light-theme structure: Deep smoky plum works as text or an action fill on the tested white and frosted-lilac surfaces below.
- A restrained dark-theme counterpart: Luminous lilac can work as text or a link on nocturnal slate, while that same accent is too faint for text on white.
A five-color muted violet palette for UI tokens
Assign each swatch a job in your CSS variables, Figma library or Tailwind theme. A decorative accent is not automatically suitable for text, an input outline or a focus indicator.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Smoky Plum | #483459 | 72, 52, 89 | 272°, 26%, 28% | Primary actions, headings, brand marks |
| --color-accent-highlight | Luminous Lilac | #C4B5E0 | 196, 181, 224 | 261°, 41%, 79% | Text on dark surfaces; decorative accents elsewhere |
| --color-surface-light | Frosted Lilac Canvas | #F7F5FA | 247, 245, 250 | 264°, 33%, 97% | Light canvas and cards |
| --color-border-subtle | Muted Heather | #E2DDEB | 226, 221, 235 | 261°, 26%, 89% | Decorative dividers, not the sole control boundary |
| --color-surface-dark | Nocturnal Slate | #15121B | 21, 18, 27 | 260°, 20%, 9% | Dark canvas and footer surfaces |
Have an existing interface or moodboard? Analyze the image to extract its actual colors before choosing tokens. For a different interface direction, compare the teal UI palette.
WCAG contrast depends on the exact pair
WCAG contrast compares the relative luminance of the lighter and darker sRGB colors as (Llighter + 0.05) / (Ldarker + 0.05). The results below come from these HEX values; a color name or fashion forecast cannot establish accessibility.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #483459 / #FFFFFF | 10.99:1 | AAA | AAA | Exceeds 3:1 where required |
| #483459 / #F7F5FA | 10.15:1 | AAA | AAA | Exceeds 3:1 where required |
| #483459 / #C4B5E0 | 5.77:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #C4B5E0 / #15121B | 9.73: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. Under WCAG 1.4.11, essential non-text parts of active controls and visual states need 3:1 against adjacent colors; inactive controls are exempt. Those checks are separate from testing a button label.
Luminous lilac #C4B5E0 against white measures only 1.90:1, and muted heather #E2DDEB against the frosted canvas #F7F5FA is only 1.23:1. Do not rely on either as the sole visible cue for essential text or a control there. Check labels, borders, hover states and focus indicators with the Contrast Checker, and use non-color cues where hue alone would convey meaning.
Light and dark token roles
In a light theme, use frosted lilac for the canvas, white for raised cards and deep smoky plum for main text or primary action fills. Muted heather can separate decorative sections; use a stronger edge or another cue where a boundary must identify an input or control.
In dark mode, start with nocturnal slate and use luminous lilac for text or links only where the tested #C4B5E0 / #15121B pair applies. Avoid deep plum body text on that dark surface. Test each interactive state separately; a passing text pair does not certify the entire theme.
CSS custom properties to start from
--color-canvas: #F7F5FA;and--color-surface: #FFFFFF;for the light foundation.--color-text-main: #15121B;and--color-brand-primary: #483459;for readable structure.--color-brand-primary-hover: #362643;for a darker hover fill; recheck the text placed on it.--color-border-subtle: #E2DDEB;for decorative separation, not an essential form-field outline.
Frequently asked questions
Are these the official HEX values for Pantone Burnished Lilac?
No. Pantone lists Burnished Lilac as 15-1905 TCX in its London Fashion Week Spring/Summer 2026 report. The five sRGB HEX values here are ColorIndicator’s original interface palette inspired by that direction, not an official Pantone conversion.
Does deep smoky plum meet WCAG AAA for normal text?
For the exact colors tested, #483459 on white measures 10.99:1 and on #F7F5FA measures 10.15:1. Both exceed the 7:1 AAA threshold for normal text. Other pairings and interface states need separate checks.
Can luminous lilac be used as text on a light surface?
Not on white: #C4B5E0 against #FFFFFF measures only 1.90:1. It works as text against the tested dark #15121B surface, where the pair measures 9.73:1.
How can I use this palette in dark mode?
Start with #15121B for the dark canvas and test #C4B5E0 for text or links against that exact surface. Check control boundaries, focus indicators and other states separately; a passing text pair does not certify the whole interface.
Where can I convert these HEX codes and check contrast?
ColorIndicator’s HEX to RGB Converter displays RGB and HSL values. Its Contrast Checker measures the 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.