Bordeaux is a rich, elegant shade embodying the depth of red mixed with a hint of purple. Positioned between red and purple on the color wheel, it exudes sophistication and warmth. Similar shades include burgundy and merlot. Use Bordeaux to add a touch of luxury and drama to your designs.
Bordeaux is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #7B1B38
- RGB value: 48.2% red, 10.6% green, 22.0% 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
For variations within the same spectrum as Bordeaux, consider:
- Burgundy (#660033): This color conveys Bordeaux's signature deep red hue with a similar balance of redness and richness.
- Red-Brown (#942222): Exhibiting an earthy undertone, this color mirrors Bordeaux's wine-like depth with a slight brownish tint.
- Dark Red (#950606): Offering an intense shade, dark red captures the rich, bold intensity akin to Bordeaux.
- Maroon (#550000): This color shares Bordeaux’s depth and warmth, presenting a comparable dark reddish-brown tone.
To complement Bordeaux, consider pairing it with:
- Champagne (#f7e6ca): Champagne’s warm, light hue provides a mellow contrast, enhancing Bordeaux’s rich depth while maintaining elegance.
- Slate Gray (#6d8196): This cool-toned neutral offers a sophisticated backdrop, allowing Bordeaux’s boldness to shine.
- Olive Green (#636b2f): The natural, muted green balances Bordeaux’s intensity, creating a grounded and polished look.
- Gold (#efbf04): Gold adds a touch of luxury and warmth, creating a harmonious and high-end palette with Bordeaux.
- Cream (#fdfbd4): Cream’s softness lightens the overall palette, accentuating Bordeaux’s boldness while adding a gentle, inviting feel.
While Bordeaux is rich and sophisticated, it may clash with:
- Neon Green (#2CFF05): Its intense brightness can overwhelm Bordeaux, creating a visually jarring contrast.
- Bright Yellow (#FFED29): This vivid hue can be too impactful against Bordeaux's depth, leading to an unbalanced pairing.
- Hot Pink (#FF46A2): This vibrant color competes with Bordeaux, making the combination visually loud and lacking cohesion.
- Cyan (#00FFFF): The stark contrast with Bordeaux's warmth can result in a dissonant visual effect.
- Purple Blue (#6A5ACD): The cool undertone of Purple Blue can clash with the warm richness of Bordeaux, leading to visual discord.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Merlot Blush
Crimson Tropics
Garnet Forest
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
10.21:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
2.06:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #7B1B38, known as Bordeaux, has RGB values of R:123, G:27, B:56 and CMYK values of C:0, M:78, Y:54, K:52.
| VALUE | CSS | |
|---|---|---|
| HEX | #7B1B38 | #7B1B38 |
| RGB DECIMAL | 123, 27, 56 | RGB(123,27,56) |
| RGB PERCENTAGE | 48.2, 10.6, 22.0 | RGB(48.2%,10.6%,22.0%) |
| CMYK | 0, 78, 54, 52 | |
| HSL | HSL(341.9, 64.0%, 29.4%) | HSL(341.9, 64.0%, 29.4%) |
| HSV (OR HSB) | 341.9°, 78.0, 48.2 | |
| WEB SAFE | #1025151 | #1025151 |
| BINARY | 01111011, 00011011, 00111000 | |
| iOS - SwiftUI | Color(red: 0.482, green: 0.106, blue: 0.220) | |
| iOS - UIKit | UIColor(red: 0.482, green: 0.106, blue: 0.220, alpha: 1) | |
| Android - Compose | Color(0xFF7B1B38) |
