Gunmetal gray is a distinctive blend of gray and silver-blue, imbued with a metallic feel. This deep, serious color combines shades of gray and blue to convey authority and timelessness. While it suggests metallic undertones, this deep, almost charcoal-like shade adds gravitas and elegance without actual metallic luster.

Gunmetal gray is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #353E43
- RGB value: 20.8% red, 24.3% green and 26.3% 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 a few ways to consider using gunmetal gray in your designs:
- Create sophisticated backgrounds. Gunmetal gray provides a professional, neutral backdrop that highlights content without causing visual fatigue. It’s perfect for business and technical applications where clarity and focus are essential.
- Emphasize subtlety in typography. Use gunmetal gray for text to enhance readability while reducing eye strain. Compared to black, its softer contrast makes extended reading more comfortable.
- Accentuate other colors. Gunmetal gray balances brighter colors, enhancing visual appeal without overpowering. Use it to highlight key information and interactive elements subtly.
- Create a modern feel. To give your UI a contemporary look with an edge of sophistication, integrate gunmetal gray into the color scheme.
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 muted spectrum as gunmetal gray, consider:
- Charcoal gray (#4A4A4A) shares gunmetal gray's subdued tone with a slightly cooler hue, making it a close match.
- Slate gray (#6D8196) offers a similar depth with a bluish tint, providing a subtle variation from gunmetal gray.
- Dark slate gray (#2F4F4F) is deeper and adds a touch of green, giving it a distinctly richer appearance.
- Davy's Gray (#555555) is slightly lighter and neutral, making it a harmonious alternative within the same color family.
To complement gunmetal gray's understated tones, consider pairing it with:
- Coral (#FF8559) provides a vibrant contrast that highlights gunmetal gray's strength.
- Cream (#FDFBD4) brings a soft, light aspect that balances the darkness of gunmetal gray.
- Soft blue (#ADD8E6) complements with a gentle, soothing hue that harmonizes beautifully with gunmetal gray's cool undertones.
- Emerald green (#006742) adds a lush, vivid touch that enriches the overall palette.
- Silver (#C4C4C4) pairs naturally, enhancing gunmetal gray's industrial chic with a shiny finish.
Other colors worth considering include dusty pink to soften the industrial feel, bright yellow for a striking contrast, and a deep burgundy to enrich the sophistication of the palette.
While gunmetal gray is versatile, it may clash with:
- Bright purple (#800080) may be too bold and can overshadow the subtlety of gunmetal gray.
- Neon green (#2CFF05) creates a harsh contrast, often straining the eyes and diluting the elegance of gunmetal gray.
- Hot pink (#FF69B4) competes for attention, potentially clashing with gunmetal gray's understated sophistication.
- Electric blue (#00F0FF) can appear overly vibrant next to gunmetal gray, disrupting the harmony of cooler, muted tones.
- Orange (#FFA500) is typically too lively and may clash with gunmetal gray, especially in professional or serene settings.
Gunmetal gray symbolizes solidity and strength. It conveys an industrial feel, often associated with resilience and durability. The color also reflects sophistication and authority.
In color psychology, gunmetal gray is seen as a color of stability and neutrality. It’s less intense than black but more authoritative than lighter grays, offering a balance that is soothing yet assertive. This shade is often used to create a sense of calm and order in spaces, suggesting reliability and support.
In UI design, gunmetal gray is excellent for backgrounds and components that require a subtle yet strong presence. It works well in interfaces aimed at professional and technical audiences, where it enhances the perception of efficiency and precision.
The term "gunmetal gray" comes from the color of gunmetal, an alloy used in making guns and other durable items. This alloy, made of copper, tin, and zinc, has a distinct dark gray color with a slight blue hue. Traditionally, both the material and color symbolize functionality and durability.
Over time, gunmetal gray became popular in fashion, automotive, and interior design because of its association with durability and a sleek, modern look. Today, it is valued in contemporary design for its understated elegance and versatility.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Dark Waters
Shadowed Shores
Dark Tranquility
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
10.93: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.
1.92: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 #353E43, known as gunmetal gray, has RGB values of R:53, G:62, B:67 and CMYK values of C:0.21, M:0.07, Y:0, K:0.74.
VALUE | CSS | |
---|---|---|
HEX | 353E43 | #353E43 |
RGB DECIMAL | 53, 62, 67 | rgb(53,62,67) |
RGB PERCENTAGE | 20.8, 24.3, 26.3 | rgb(20.8%,24.3%,26.3%) |
CMYK | 21, 7, 0, 74 | |
HSL | 201.4°, 11.7, 23.5 | hsl(201.4,11.7%,23.5%) |
HSV (OR HSB) | 201.4°, 20.9, 26.3 | |
WEB SAFE | 333333 | #333333 |
CIE-LAB | 25.585, -2.425, -4.314 | |
XYZ | 4.204, 4.607, 5.978 | |
xyY | 0.284, 0.312, 4.607 | |
CIE-LCH | 25.585, 4.949, 240.655 | |
CIE-LUV | 25.585, -4.51, -4.623 | |
HUNTER-LAB | 21.465, -2.605, -1.486 | |
BINARY | 00110101, 00111110, 01000011 | |
iOS - SwiftUI | Color(red: 53/255, green: 62/255, blue: 67/255) | |
iOS - UIKit | UIColor(red: 53/255.0, green: 62/255.0, blue: 67/255.0, alpha: 1.0) | |
Android - Compose | Color(0xFF353E43) |