#333333 color: dark gray hex code, RGB and shades

#333333 is RGB 51, 51, 51, a neutral dark gray at 20% lightness. As text on white it measures 12.63:1, which makes it a popular softer alternative to pure black body text.

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

Updated November 10, 2026

ColorPlum swatch#333333dark gray

HEX: #333333
RGB: rgb(51, 51, 51)
HSL: hsl(0, 0%, 20%)

Best text on it: white at 12.63:1

Build a palette Make a gradient Check contrast Wallpaper

#333333#333333

Every code for #333333

HEX#333333
RGBrgb(51, 51, 51)
HSLhsl(0, 0%, 20%)
HSV0°, 0%, 20%
CMYK0%, 0%, 0%, 80%
Lablab(21.2% 0 0)
OKLCHoklch(32.1% 0 89.9)
Decimal3355443

Tints, shades and tones

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

90%#EBEBEB
80%#D6D6D6
70%#C2C2C2
60%#ADADAD
50%#999999
40%#858585
30%#707070
20%#5C5C5C
10%#474747
Base#333333
10%#2E2E2E
20%#292929
30%#242424
40%#1F1F1F
50%#1A1A1A
60%#141414
70%#0F0F0F
80%#0A0A0A
90%#050505

Tones (mixed with gray)

10%#3B3B3B
20%#424242
30%#4A4A4A
40%#525252
50%#5A5A5A
60%#616161
70%#696969
80%#717171
90%#787878

Matching colors

Complementary

Analogous

Triadic

Split complementary

Tetradic (square)

Monochromatic

#0A0A0A
#0D0D0D
#333333
#595959
#808080

#333333 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.

#333333 with its complement, its triad and its tint and shade

#333333
Triad #333333
Triad #333333
Complement
50% tint
50% shade

#333333 in use

New collectionAutumn edit

Card body text stays dark for reading; #333333 carries the header and the button.

Shop nowTag

Headline in #333333

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#333333
Protanopia (no red cones)#333333
Deuteranopia (no green cones)#333333
Tritanopia (no blue cones)#333333

Contrast and readability

Pairing	Ratio	WCAG 2.2
as text on white	12.63:1	AA AA large AAA
as text on black	1.66:1	AA AA large AAA
white text on it	12.63:1	AA AA large AAA
black text on it	1.66:1	AA AA large AAA
on your background	11.03:1	AA AA large AAA

Try a background

Export

:root {
  --333333: #333333;
  --333333-rgb: 51 51 51;
  --333333-on: #ffffff;
}

On this page

Hex #333333 is the shorthand #333 written out in full: each channel is 51, which is exactly one fifth of 255. In HSL that is 0° hue, 0% saturation and 20% lightness, a gray with no tint at all. The decimal value is 3355443 and the CMYK estimate is 0%, 0%, 0%, 80%.

Why designers pick #333333 for text

Pure black on pure white is the highest contrast a screen can show, and on a large bright display it can feel harsh over long paragraphs. Swapping the text to #333333 takes the edge off while keeping the ratio high: 12.63:1 on white, far beyond the 7:1 AAA level. That is why it turns up as the default body color in so many stylesheets and blog themes. On a black background the same gray is a poor choice, at 1.66:1.

Names and neighbors

In the xkcd survey the closest answers are "dark grey" (#363737) and "charcoal" (#343837), both under 2 OKLab units away, so people would most likely call this color charcoal. The CSS list is far less helpful: the nearest named entry is darkslategray (#2F4F4F) at 9 units, a visibly greener color. For a named gray in the same family, see charcoal gray.

Tints and shades

The tint strip moves toward white in 10% steps, starting with #474747 and passing #707070 and #999999 before reaching #EBEBEB at 90%. The shades go the other way: #2E2E2E, #292929, then down to #050505. Because the channels are equal, every one of these is a pure gray, and the middle tints are useful for secondary text. For example, #707070 is the 30% tint, a common choice for captions.

Using it

Body text: set it on white or on #F8F8F8 (11.89:1) for long reading.
Headings: it can match the body color, or you can go darker with the 50% shade #1A1A1A.
Light grays beneath it: on #EEEEEE it measures 10.88:1 and on #F0F0F0 11.08:1.
Backgrounds: a #333333 panel with white text is a calm dark mode. Lift borders inside it with the 20% tint #5C5C5C.

Worked example

A friend asks you to refresh the blog on her pottery site. The theme sets text to black on white and the long glaze-recipe posts feel dense. Change the body color to #333333 and keep links in a deep blue. In the contrast panel above, the page white against #333333 gives 12.63:1, so nobody loses legibility, and the lighter weight of the page is noticeable right away. For the small gray date line under each title, use #707070 on white, it measures 4.95:1, which just clears the 4.5:1 AA line, so it is about as light as small text should go.