What color is charcoal?
Charcoal is a dark, neutral, and versatile shade of gray that resembles the residue left by burning wood or coal. It is located on the color wheel's darker end of the gray spectrum, embodying a deep, subdued tone. Charcoal includes variations that range from near-black to lighter, smoky gray.
What does charcoal look like on digital screens?
Charcoal is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #4A4A4A
- RGB value: 29% red, 29% green and 29% 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.
How should I effectively use charcoal in UI design?
Here are some ways to leverage charcoal’s versatile and subdued qualities:
- Establish a professional tone. Use charcoal in UI elements for business applications, corporate websites, and professional tools to convey reliability and authority.
- Use as a background and base. Charcoal is an excellent background color because it's less harsh than black and can reduce eye strain. It provides a strong, neutral base that makes other colors pop, ideal for dashboards and detailed interfaces.
- Consider using for text and typography. Charcoal is a great alternative to black for text, offering softer contrast with light backgrounds that can make reading easier on the eyes. It's particularly useful for large blocks of text or detailed information.
- Create depth and layering. Mixing charcoal with shades of gray can create depth, helping guide the user's eye through the interface in a structured way.
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.
What are similar colors to charcoal?
For variations within the same deep and muted spectrum as charcoal, consider:
- Gunmetal (#353E43) is slightly darker with a bluish undertone, giving it a cooler appearance, similar to charcoal.
- Onyx (#353839) has a nearly black shade that shares charcoal’s serious and versatile qualities.
- Dark slate gray (#2F4F4F) offers a hint of green, providing a similarly dark and subdued option.
- Outer Space (#414A4C) presents a darker blue, maintaining charcoal's dark and neutral characteristics.
What colors go with charcoal?
To complement charcoal's sophisticated tones, consider pairing it with:
- Cream (#FDFBD4) provides a soft contrast that brightens charcoal’s stern appearance.
- Cherry red (#FF1A1A) stands out against charcoal, offering a vibrant splash of color.
- Sky blue (#87CEEB) adds a serene and calming effect, complementing the understated nature of charcoal.
- Pale gold (#E6BE8A) introduces a subtle shimmer, enhancing charcoal’s depth.
- Mint green (#ADEBB3) brings a fresh, vibrant touch that lightens the mood when combined with charcoal.
Other colors worth considering include navy blue for a professional look, terracotta for a warm contrast, and soft lavender for a touch of spring.
What colors conflict with charcoal?
While charcoal is versatile, it may clash with:
- Bright yellow (#FFFF00) can seem overly stark and may overpower the subdued nature of charcoal.
- Hot pink (#FF69B4) tends to compete for attention, potentially clashing with charcoal’s understated elegance.
- Electric blue (#00F0FF) might be too vibrant, overshadowing the subtle qualities of charcoal.
- Neon green (#2CFF05) creates a high contrast that can be jarring against charcoal’s dark tone.
- Bright orange (#FFA500) competes heavily with charcoal, potentially creating a visually uncomfortable pairing.
What does charcoal symbolize?
As a color, charcoal symbolizes strength, stability, and sophistication. Charcoal is seen as a strong, often conservative color in color psychology, suggesting reliability and modesty.
In UI design, charcoal’s deep, muted gray tones offer a sense of grounding and neutrality, making it a popular choice in contexts where understated elegance is a goal. It's less stark than black, providing a softer alternative that still retains much of the gravitas and formality associated with darker hues.
What’s the history of charcoal?
Charcoal takes its name and qualities from the actual substance used for drawing and fuel. Charcoal has been used as a drawing material for thousands of years due to its ability to produce rich, deep lines that can easily be smudged or blended for artistic effect. Its use dates back to prehistoric times, with charcoal pieces found in caves alongside early human drawings.
Today, charcoal is prevalent in both fashion and design, favored for its ability to blend well with a wide range of colors and its suitability for professional settings.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
The Basics
Graphic Charcoal
Cold Ash
Accessibility: Contrast Checker
8.86: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
2.37: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
Color conversion
The hexadecimal color #4A4A4A, known as charcoal, has RGB values of R:74, G:74, B:74 and CMYK values of C:0, M:0, Y:0, K:0.71.
VALUE | CSS | |
---|---|---|
HEX | 4A4A4A | #4A4A4A |
RGB DECIMAL | 74, 74, 74 | rgb(74,74,74) |
RGB PERCENTAGE | 29, 29, 29 | rgb(29%,29%,29%) |
CMYK | 0, 0, 0, 71 | |
HSL | 0°, 0, 29 | hsl(0,0%,29%) |
HSV (OR HSB) | 0°, 0, 29 | |
WEB SAFE | 333333 | #333333 |
CIE-LAB | 31.458, -0, -0.004 | |
XYZ | 6.509, 6.848, 7.457 | |
xyY | 0.313, 0.329, 6.848 | |
CIE-LCH | 31.458, 0.004, 266.929 | |
CIE-LUV | 31.458, -0.002, -0.004 | |
HUNTER-LAB | 26.168, -1.398, 1.422 | |
BINARY | 01001010, 01001010, 01001010 | |
iOS - SwiftUI | Color(red: 74 / 255, green: 74 / 255, blue: 74 / 255) | |
iOS - UIKit | UIColor(red: 74 / 255.0, green: 74 / 255.0, blue: 74 / 255.0, alpha: 1.0) | |
Android - Compose | Color(0xFF4A4A4A) |