Figma color wheel
Looking to explore complementary or analogous colors for your design?
Claret is a deep, rich red-purple color associated with luxury and elegance. It sits between red and violet on the color wheel. This hue is darker than burgundy but lighter than plum. Use claret to add a touch of sophistication and warmth to designs.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Crimson Allure
Jade Blush
Crimson Petal
Claret is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #7F1734
- RGB value: 49.8% red, 9.0% green, 20.4% 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 Claret, consider:
- Burgundy (#660033): This deep reddish-purple captures Claret’s rich, wine-like quality while leaning slightly more toward purple.
- Dark Red (#950606): A bold, intense shade, it shares Claret's depth and warmth, though balanced with a slight brown undertone.
- Crimson Red (#b22222): Offers a robust, striking hue that mirrors Claret’s vivid intensity with a hint more brightness.
- Cherry (#d20a2e): Captures Claret’s vibrant, red essence, enhanced with a lively, fruit-like vibrancy.
To complement Claret, consider pairing it with:
- Mint Green (#ADEBB3): This soft, pastel shade provides a refreshing contrast, making Claret appear more vibrant and lively.
- Champagne (#F7E6CA): A subtle and elegant choice, champagne creates a sophisticated pairing, letting Claret’s richness shine.
- Slate Gray (#6D8196): Slate gray offers a modern, muted contrast to Claret, adding depth and a contemporary feel to the palette.
- Pistachio (#84B067): This earthy green brings out Claret's warmth, creating a harmonious and inviting combination.
Other colors worth considering include beige for a neutral balance and seafoam for a cool, calming contrast.
While Claret is a rich and deep hue that emanates a regal charm, it may clash with:
- Neon Pink (#FF13F0): This vibrant color competes against Claret’s depth, creating a stark contrast that can be visually overwhelming.
- Lime Green (#89F336): The bold brightness of lime green clashes with Claret's mature tone, leading to a palette that feels unbalanced.
- Orange (#FFA500): The warm intensity of orange can overshadow Claret’s subtler elegance, resulting in a combination that lacks harmony.
- Cyan (#00FFFF): The cool brilliance of cyan competes with Claret's warmth, producing a jarring visual effect.
Contrast checker
Contrast 10.12
- Large Text
#7F1734
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 2.07
- Large Text
#7F1734
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #7F1734, known as Claret, has RGB values of R:127, G:23, B:52 and CMYK values of C:0, M:82, Y:59, K:50.
| VALUE | CSS | |
|---|---|---|
| HEX | #7F1734 | #7F1734 |
| RGB DECIMAL | 127, 23, 52 | RGB(127,23,52) |
| RGB PERCENTAGE | 49.8, 9.0, 20.4 | RGB(49.8%,9.0%,20.4%) |
| CMYK | 0, 82, 59, 50 | |
| HSL | 343.3°, 69.3, 29.4 | HSL(343.3, 69.3%, 29.4%) |
| HSV (OR HSB) | 343.3°, 81.9, 49.8 | |
| WEB SAFE | #660033 | #660033 |
| CIE-LAB | 27.775, 44.808, 10.256 | |
| XYZ | 0.097, 0.054, 0.038 | |
| xyY | 0.498, 0.09, 0.204 | |
| CIE-LCH | 27.775, 45.966, 0.225 | |
| CIE-LUV | 27.775, 66.14, 2.757 | |
| HUNTER-LAB | 27.775, 44.808, 10.256 | |
| BINARY | 01111111, 00010111, 00110100 | |
| iOS - SwiftUI | Color(red: 0.498, green: 0.090, blue: 0.204) | |
| iOS - UIKit | UIColor(red: 0.498, green: 0.090, blue: 0.204, alpha: 1) | |
| Android - Compose | Color(0xFF#7F1734) |
