Burgundy has a long life in fashion, beauty and packaging. That visibility can inspire a digital palette, but it is not evidence that software teams are broadly adopting burgundy UI. This guide makes a narrower case: deep wine can be a useful alternative to black or navy when a brand wants warmth, provided the actual interface pairings are readable.
The five colors below move from a dark burgundy anchor to cream and stone surfaces, with mauve used selectively. Their names and roles are ColorIndicator editorial choices, not an industry standard. For autumn campaign inspiration rather than interface tokens, see the Fall Color Palette Guide or the Seasonal Palettes hub.
Why burgundy works as a digital design color
- A distinct brand anchor: #5A1827 can carry headings or primary actions when a warmer identity fits the product.
- Hierarchy without semantic confusion: A deep wine color can feel quieter than a vivid red, but color meaning is contextual. Keep errors and destructive actions explicitly labeled and distinguishable.
- Measured light-theme contrast: Dark burgundy works against white and champagne cream in the tested pairs below. A color’s reputation does not substitute for measuring its actual foreground and background.
A five-color burgundy palette for UI tokens
These sRGB values are a starting set for a Figma library, CSS variables or Tailwind configuration. Assign each color a role before using it; do not assume that every decorative swatch is suitable for text or a control outline.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Burgundy | #5A1827 | 90, 24, 39 | 346°, 58%, 22% | Primary actions, headings, wordmarks |
| --color-accent-highlight | Blushed Mauve | #D48B97 | 212, 139, 151 | 350°, 46%, 69% | Text on dark surfaces; decorative accents elsewhere |
| --color-surface-light | Champagne Cream | #FAF7F2 | 250, 247, 242 | 38°, 44%, 96% | Light canvas and cards |
| --color-border-subtle | Warm Stone | #E8DFD8 | 232, 223, 216 | 26°, 26%, 88% | Decorative dividers, not the sole control boundary |
| --color-surface-dark | Black Cherry | #1A0A0E | 26, 10, 14 | 345°, 44%, 7% | Dark canvas and footer surfaces |
Have an existing campaign photo or product image? Analyze the image to extract its actual colors, then compare those results with this proposed system. To inspect an individual code, use the HEX to RGB Converter, which also displays HSL.
WCAG contrast: test the exact pair
For sRGB colors, WCAG contrast uses linearized relative luminance and compares the lighter and darker colors as (Llighter + 0.05) / (Ldarker + 0.05). The ratios below are calculated from the stated HEX values; they are not a blanket accessibility certification for the palette.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #5A1827 / #FFFFFF | 13.17:1 | AAA | AAA | Exceeds 3:1 where required |
| #5A1827 / #FAF7F2 | 12.32:1 | AAA | AAA | Exceeds 3:1 where required |
| #5A1827 / #D48B97 | 4.98:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #D48B97 / #1A0A0E | 7.26:1 | AAA | AAA | Exceeds 3:1 where required |
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text; AAA raises those thresholds to 7:1 and 4.5:1. Essential non-text parts of controls and their states need 3:1 against adjacent colors under WCAG 1.4.11. Those are different checks. For example, mauve #D48B97 against cream #FAF7F2 is only 2.48:1, and stone #E8DFD8 against cream is only 1.23:1: neither should be the sole visible cue for an essential control on that surface.
Run real button labels, links, borders and focus states through the Contrast Checker before release. A passing swatch pair does not prove that every size, state, gradient or adjacent surface passes.
Light and dark token roles
On a light page, use champagne cream for the canvas, white for raised cards and deep burgundy for primary text or action fills. Warm stone can separate decorative sections, but add a stronger edge or another cue if a boundary is needed to identify a control.
For dark mode, start with black cherry as the canvas and use blushed mauve for text or links only where the tested #D48B97 / #1A0A0E pair applies. Avoid dark-burgundy body text on black cherry. Test the states of every interactive element separately rather than treating one passing text pair as approval for the whole theme.
CSS custom properties to start from
--color-canvas: #FAF7F2;and--color-surface: #FFFFFF;for the light foundation.--color-text-main: #1A0A0E;and--color-brand-primary: #5A1827;for readable structure.--color-brand-primary-hover: #45101C;for a darker hover fill; recheck any text placed on it.--color-border-subtle: #E8DFD8;for decorative separation, not an essential form-field outline.
Frequently asked questions
What makes burgundy useful in a brand palette?
Burgundy can give a brand a warmer, quieter alternative to black or navy. Its effect depends on the surrounding colors, typography and context; the color alone does not communicate one universal meaning.
Does burgundy meet WCAG AAA contrast requirements?
The specific #5A1827 and #FFFFFF pair measures 13.17:1, and #5A1827 on #FAF7F2 measures 12.32:1. Both exceed the 7:1 AAA threshold for normal text. That does not certify an entire interface: test each actual text, background and state combination.
Can blushed mauve be used for normal-size text?
On #1A0A0E, #D48B97 measures 7.26:1 and exceeds AAA for normal text. Against #5A1827 it measures 4.98:1, meeting AA for normal text and AAA for large text, but not AAA for normal text.
How should I adapt this palette for dark mode?
Use #1A0A0E as a dark surface and #D48B97 for text or links where the measured 7.26:1 pair applies. Check focus indicators, controls and other adjacent colors separately instead of assuming the whole theme passes from one text pair.
Where can I convert these HEX codes to RGB or HSL?
ColorIndicator’s HEX to RGB Converter shows RGB and HSL values for a HEX color. Use the Contrast Checker to test the exact foreground and background pair.
For the specific pair in your product, open the Contrast Checker. For exact RGB and HSL values, use the HEX to RGB Converter.