Figma color wheel
Want to find the perfect complementary or analogous colors to match burgundy?
Skip to main content
Everything you need to know about burgundy to inspire your next design.
Burgundy is a rich and sophisticated color that blends dark red with hints of purple. This intense hue is positioned towards the darker end of the color spectrum, conveying depth and warmth and an atmosphere of sophistication and refinement.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Summer Wine
Blooming Romance
Royal Gemstones
Burgundy is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #660033
- RGB value: 40% red, 0% green and 20% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
To effectively use burgundy in UI design, consider these tips:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same deep and rich spectrum as burgundy, consider:
To complement burgundy's luxurious tones, consider pairing it with:
Other colors worth considering include forest green for a natural, grounded look, soft lavender for a gentle, contrasting pop, and pale blue for a cool, serene complement.
While burgundy is versatile, it may clash with:
Burgundy, especially the deep, rich shade represented by hex #660033, is synonymous with mature elegance and refined luxury. This color implies wealth and sophistication and conveys depth and richness.
In color psychology, burgundy is known to stimulate the appetite and promote warmth and comfort. Though more subdued than brighter reds, its intense hue can still evoke feelings of passion and energy.
In UI/UX design, burgundy creates a sophisticated and elegant atmosphere, making it especially effective for luxury branding and high-end websites. When used as an accent color, it helps highlight the most crucial elements of a design without overwhelming the user.
Burgundy’s name comes from the wine-producing region of Burgundy in France. The Burgundy region has been renowned for wine production since the Roman times, but the color gained prominence during the late Middle Ages and Renaissance. With improved dyeing techniques, deeper and richer reds became possible and highly sought after by the nobility and wealthy classes. Often worn by kings, nobles, and clergy, burgundy garments symbolized status, wealth, and power.
In the 19th century, burgundy became popular in Victorian fashion, symbolizing elegance and importance for both genders. In the 20th century, burgundy’s association with sophistication and luxury persisted, influencing interior design, automotive, and fashion.
Contrast 13.02
#660033
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 1.61
#660033
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #660033, known as burgundy, has RGB values of R:102, G:0, B:51 and CMYK values of C:0, M:1, Y:0.5, K:0.6.
| VALUE | CSS | |
|---|---|---|
| HEX | 660033 | #660033 |
| RGB DECIMAL | 102, 0, 51 | rgb(102,0,51) |
| RGB PERCENTAGE | 40, 0, 20 | rgb(40%,0%,20%) |
| CMYK | 0, 100, 50, 60 | |
| HSL | 330°, 100, 20 | hsl(330,100%,20%) |
| HSV (OR HSB) | 330°, 100, 40 | |
| WEB SAFE | 660033 | #660033 |
| CIE-LAB | 20.3, 43.47, -0.414 | |
| XYZ | 6.077, 3.064, 3.403 | |
| xyY | 0.484, 0.244, 3.064 | |
| CIE-LCH | 20.3, 43.472, 359.455 | |
| CIE-LUV | 20.3, 50.838, -6.679 | |
| HUNTER-LAB | 17.506, 31.333, 0.727 | |
| BINARY | 01100110, 00000000, 00110011 | |
| iOS - SwiftUI | Color(red: 102/255, green: 0/255, blue: 51/255) | |
| iOS - UIKit | UIColor(red: 102/255.0, green: 0/255.0, blue: 51/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFF660033) |
Want to find the perfect complementary or analogous colors to match burgundy?
Uncover the elegant and rich color of maroon.
Learn more about navy blue.