Skip to main content

Charcoal

Everything you need to know about charcoal to inspire your next design.

Pick a palette type

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.

charcoal colorcharcoal color

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

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #4A4A4A text on a #FFFFFF background.

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
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #4A4A4A text on a #000000 background.

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.

VALUECSS
HEX4A4A4A#4A4A4A
RGB DECIMAL74, 74, 74rgb(74,74,74)
RGB PERCENTAGE29, 29, 29rgb(29%,29%,29%)
CMYK0, 0, 0, 71
HSL0°, 0, 29hsl(0,0%,29%)
HSV (OR HSB)0°, 0, 29
WEB SAFE333333#333333
CIE-LAB31.458, -0, -0.004
XYZ6.509, 6.848, 7.457
xyY0.313, 0.329, 6.848
CIE-LCH31.458, 0.004, 266.929
CIE-LUV31.458, -0.002, -0.004
HUNTER-LAB26.168, -1.398, 1.422
BINARY01001010, 01001010, 01001010
iOS - SwiftUIColor(red: 74 / 255, green: 74 / 255, blue: 74 / 255)
iOS - UIKitUIColor(red: 74 / 255.0, green: 74 / 255.0, blue: 74 / 255.0, alpha: 1.0)
Android - ComposeColor(0xFF4A4A4A)