Cognac is a rich, inviting, and warm color named after the French brandy. It features deep amber and brown tones, reminiscent of the liquor's natural hue, which varies depending on age and distillation method. Positioned between orange and brown on the color wheel, cognac includes a range of shades from golden brown to a deeper, reddish-brown.
Cognac is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #A2574F
- RGB value: 63.5% red, 34.1% green and 31% 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.
Here are some ways to use cognac effectively in your UI designs:
- Highlight luxury and elegance. Use cognac to highlight luxury and elegance in designs for premium services and luxury goods.
- Create a welcoming atmosphere. Apply cognac in backgrounds or menus to create a warm, inviting atmosphere in lifestyle or community-focused apps.
- Complement with color. Pair cognac with contrasting colors like teal or coral to direct focus and enhance user interaction.
- Use in visual storytelling. Cognac’s vintage appeal can be used in themes that deal with history, tradition, or craftsmanship to enhance the narrative of your design.
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 rich and warm spectrum as cognac, consider:
- Chestnut (#954535) which presents a similar depth with a slightly more brownish tint, resonating with the warmth of cognac.
- Burnt sienna (#ED7B58) offers a lighter, more orange-toned hue, still carrying the warm, earthy feel of cognac.
- Copper red (#CB6D51) shares a close resemblance in warmth and richness, providing a slightly brighter alternative.
- Terra cotta (#E2725B) is a bit more muted but maintains the earthy and inviting quality of cognac.
To complement cognac's deep, warm tones, consider pairing it with:
- Navy blue (#000080) which provides a striking contrast, enhancing the rich depth of cognac.
- Warm beige (#F5F5DC) offers a subtle, soft background that allows cognac to stand out.
- Sage green (#9CAE88) complements the earthiness of cognac with its subdued, natural tones.
- Cream (#FDFBD4) creates a light, airy feel that contrasts nicely with the intensity of cognac.
- Dark chocolate (#3F000F) deepens the aesthetic, promoting a sophisticated and cohesive palette.
Additional colors worth considering include soft gray for a modern twist, powder blue for a gentle contrast, and antique white for a classic, refined look.
While cognac is a versatile color, it may clash with:
- Bright pink (#FF69B4) as its vivid and light-hearted tone can overshadow the subtle richness of cognac.
- Lime green (#89F336) which can appear too harsh and contemporary against the traditional elegance of cognac.
- Electric blue (#007FFF) might be too vibrant and disturb cognac's warm aesthetics.
- Neon orange (#FFA500) offers an overly bright contrast that can compete for attention against cognac's understated richness.
- Pale lavender (#E6E6FA) may dilute the robust character of cognac, resulting in a washed-out appearance.
Cognac brandy is associated with sophistication, luxury, and tradition. This connection extends to the color, too, suggesting a refined taste and a sense of heritage. The warm hue also evokes craftsmanship and quality, particularly for timeless and well-aged items.
In color psychology, cognac evokes feelings of warmth and comfort. Earthy tones typically make people feel grounded and secure, offering stability and reliability. Warm colors are also believed to stimulate interaction and conversation, making them ideal for social spaces and environments where comfort and communication are goals.
In UI/UX design, cognac translates into a feeling of elegance and warmth on digital interfaces. Its sophisticated nature makes it perfect for brands that want to project luxury and exclusivity. When used strategically for backgrounds, buttons, or graphics, cognac can reduce visual fatigue due to its softer, less glaring nature compared to brighter colors. Cognac can also enhance user engagement by evoking a sense of familiarity and richness, encouraging longer interaction times and deeper immersion in the digital environment.
While there isn't a well-documented history specific to the color cognac, color names often emerge through cultural association. Cognac likely gained its name from the famous brandy of the same name produced in the Cognac region of France.
Historically, cognac has seen significant use in fashion, particularly leather goods like shoes and jackets.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Muse
Terra
Desert Dusk
Contrast 5.23
- Large Text
#A2574F
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Contrast 4.01
- Large Text
#A2574F
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #A2574F, known as cognac, has RGB values of R:162, G:87, B:79 and CMYK values of C:0, M:0.46, Y:0.51, K:0.36.
| VALUE | CSS | |
|---|---|---|
| HEX | A2574F | #A2574F |
| RGB DECIMAL | 162, 87, 79 | rgb(162,87,79) |
| RGB PERCENTAGE | 63.5, 34.1, 31 | rgb(63.5%,34.1%,31%) |
| CMYK | 0, 46, 51, 36 | |
| HSL | 5.8°, 34.4, 47.3 | hsl(5.8,34.4%,47.3%) |
| HSV (OR HSB) | 5.8°, 51.2, 63.5 | |
| WEB SAFE | 996666 | #996666 |
| CIE-LAB | 45.721, 29.961, 18.446 | |
| XYZ | 19.72, 15.064, 9.266 | |
| xyY | 0.448, 0.342, 15.064 | |
| CIE-LCH | 45.721, 35.184, 31.619 | |
| CIE-LUV | 45.721, 53.85, 16.292 | |
| HUNTER-LAB | 38.812, 22.773, 13.014 | |
| BINARY | 10100010, 01010111, 01001111 | |
| iOS - SwiftUI | Color(red: 162/255, green: 87/255, blue: 79/255) | |
| iOS - UIKit | UIColor(red: 162/255.0, green: 87/255.0, blue: 79/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFA2574F) |
