Skip to content
ColorPlum

Colors · value from the xkcd color survey (2010)

Charcoal gray color: hex code #3C4142, RGB and shades

Charcoal gray is #3C4142 (RGB 60, 65, 66), the value people most often called charcoal grey in the xkcd color survey: a dark gray with a trace of blue-green. White text reaches 10.36:1 on it.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchCharcoal graydark gray
HEX
#3C4142
RGB
rgb(60, 65, 66)
HSL
hsl(190, 5%, 25%)

Best text on it: white at 10.36:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Charcoal gray

  • HEX#3C4142
  • RGBrgb(60, 65, 66)
  • HSLhsl(190, 5%, 25%)
  • HSV190°, 9%, 26%
  • CMYK9%, 2%, 0%, 74%
  • Lablab(27.1% -2 -1.4)
  • OKLCHoklch(37.1% 0.007 211)
  • Decimal3948866

Tints, shades and tones

From white to black in 10% steps, with Charcoal gray in the middle. Tap a code to copy it.

  1. 90%#ECECEC
  2. 80%#D8D9D9
  3. 70%#C5C6C6
  4. 60%#B1B3B3
  5. 50%#9EA0A1
  6. 40%#8A8D8E
  7. 30%#777A7B
  8. 20%#636768
  9. 10%#505455
  10. Base#3C4142
  11. 10%#363B3B
  12. 20%#303435
  13. 30%#2A2E2E
  14. 40%#242728
  15. 50%#1E2121
  16. 60%#181A1A
  17. 70%#121414
  18. 80%#0C0D0D
  19. 90%#060707

Tones (mixed with gray)

  1. 10%#434748
  2. 20%#4A4E4E
  3. 30%#505455
  4. 40%#575A5B
  5. 50%#5E6161
  6. 60%#656767
  7. 70%#6C6D6D
  8. 80%#727374
  9. 90%#797A7A

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #0A0B0B
  • #181A1A
  • #3C4142
  • #60686A
  • #868F91

Charcoal gray in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Charcoal gray with its complement, its triad and its tint and shade
  • Charcoal gray
  • Triad #423C41
  • Triad #41423C
  • Complement
  • 50% tint
  • 50% shade

Charcoal gray in use

New collectionAutumn edit

Card body text stays dark for reading; charcoal gray carries the header and the button.

Shop nowTag

Headline in Charcoal gray

A paragraph with a link set in this color, which is dark enough for text on white.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#3C4142
  • Protanopia (no red cones)#404142
  • Deuteranopia (no green cones)#3F4042
  • Tritanopia (no blue cones)#3A4241

Contrast and readability

PairingRatioWCAG 2.2
as text on white10.36:1AA AA large AAA
as text on black2.02:1AA AA large AAA
white text on it10.36:1AA AA large AAA
black text on it2.02:1AA AA large AAA
on your background9.04:1AA AA large AAA

Export

:root {
  --charcoal-gray: #3c4142;
  --charcoal-gray-rgb: 60 65 66;
  --charcoal-gray-on: #ffffff;
}
On this page

Charcoal is the dark gray of burnt wood, and in design it is the usual replacement for pure black. CSS has no charcoal keyword, so this page follows the xkcd survey, in which volunteers typed names for swatches. The survey spells it "charcoal grey", and the shade most people gave that name is #3C4142. This site writes gray in US style, but the color is the same.

What the codes mean

In RGB, charcoal gray is 60, 65, 66: three nearly equal channels, with blue a few steps ahead of red. In HSL that is hue 190°, 5% saturation and 25% lightness, so there is a faint cool, blue-green tint on top of the gray. The CMYK estimate is 9%, 2%, 0%, 74%. The slight tint is why it looks more natural next to blues and teals than a perfectly neutral gray.

Other survey names are close: "charcoal" (#343837) is 3.5 away in OKLab distance, "dark grey" (#363737) 3.6, and "dark grey blue" (#29465B) 4.5. In CSS, the nearest is darkslategray (#2F4F4F), 4.5 away and a bit greener, then darkslateblue (#483D8B), 13.1 away and much more purple. For lighter neutrals, see the gray palettes.

Using charcoal gray well

  • Text on it: white measures 10.36:1, past AAA. Black on it is 2.02:1.
  • As text: charcoal on white is also 10.36:1, and on ghost white (#F8F8FF) 9.79:1, so it is a strong, softer-than-black body color. On beige (#F5F5DC) it reads 9.36:1.
  • Tints: the 40% tint, #8A8D8E, makes a mid-gray. As a line on charcoal it reaches only 3.09:1, so it suits graphics, not text.
  • Pairings: the complement is a warm gray-brown, #423D3C. Mustard, coral, mint and white are the usual accents.

Worked example

A designer is building a portfolio site and wants a dark mode that is gentler than black. The page background is #3C4142 and the headings are white at 10.36:1. Body text in the 90% tint, #ECECEC, is a bit softer than white and measures 8.76:1, still above AAA. Links need an accent, so use the pale ice blue #D7FFFE, which reaches 9.68:1 on the charcoal background. Keep the 40% tint, #8A8D8E, for borders and dividers only, since it is just 3.09:1 against the page.

Charcoal versus black and slate

Charcoal is lighter than black and more neutral than slate, which has more blue. The silver palettes show it as the dark partner for cool metallics.

Sources

  1. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  2. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org