#F4F4F4 color: light gray hex code for code blocks and stripes

#F4F4F4 is RGB 244, 244, 244, a light neutral gray at 96% lightness. It is practically the same as CSS whitesmoke, and a handy fill for code blocks and table stripes, with #333333 text at 11.48:1.

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

Updated November 10, 2026

ColorPlum swatch#F4F4F4very pale gray

HEX: #F4F4F4
RGB: rgb(244, 244, 244)
HSL: hsl(0, 0%, 96%)

Best text on it: black at 19.09:1

Build a palette Make a gradient Check contrast Wallpaper

#F4F4F4#F4F4F4

Every code for #F4F4F4

HEX#F4F4F4
RGBrgb(244, 244, 244)
HSLhsl(0, 0%, 96%)
HSV0°, 0%, 96%
CMYK0%, 0%, 0%, 4%
Lablab(96.2% 0 0)
OKLCHoklch(96.7% 0 89.9)
Decimal16053492

Tints, shades and tones

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

90%#FEFEFE
80%#FDFDFD
70%#FCFCFC
60%#FBFBFB
50%#FAFAFA
40%#F8F8F8
30%#F7F7F7
20%#F6F6F6
10%#F5F5F5
Base#F4F4F4
10%#DCDCDC
20%#C3C3C3
30%#ABABAB
40%#929292
50%#7A7A7A
60%#626262
70%#494949
80%#313131
90%#181818

Tones (mixed with gray)

10%#E8E8E8
20%#DDDDDD
30%#D1D1D1
40%#C6C6C6
50%#BABABA
60%#AEAEAE
70%#A3A3A3
80%#979797
90%#8C8C8C

Matching colors

Complementary

Analogous

Triadic

Split complementary

Tetradic (square)

Monochromatic

#A8A8A8
#CECECE
#F4F4F4
#F5F5F5
#F5F5F5

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

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

#F4F4F4
Triad #F4F4F4
Triad #F4F4F4
Complement
50% tint
50% shade

#F4F4F4 in use

New collectionAutumn edit

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

Shop nowTag

Headline in #F4F4F4

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

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

Contrast and readability

Pairing	Ratio	WCAG 2.2
as text on white	1.09:1	AA AA large AAA
as text on black	19.09:1	AA AA large AAA
white text on it	1.09:1	AA AA large AAA
black text on it	19.09:1	AA AA large AAA
on your background	1.04:1	AA AA large AAA

Try a background

Export

:root {
  --f4f4f4: #f4f4f4;
  --f4f4f4-rgb: 244 244 244;
  --f4f4f4-on: #000000;
}

On this page

Hex #F4F4F4 sits in the middle of the pale grays: all channels are 244, which is 11 below white, 4 above #F0F0F0 and 4 below #F8F8F8. In HSL it is 0° hue with 0% saturation and 96% lightness; CMYK is 0%, 0%, 0%, 4%, and the decimal value is 16053492.

It is almost whitesmoke

The CSS named color whitesmoke is #F5F5F5, one step lighter in every channel. The distance between the two is 0.3 OKLab units, a gap too small to see, so you can treat #F4F4F4 as a hand-picked whitesmoke. If you want the named version in your CSS, background: whitesmoke is shorter and just as valid. The next closest names, aliceblue and ghostwhite, are 1.5 and 1.7 away and carry a blue tint.

What it is used for

Code blocks: inline code and fenced blocks on a white page often get a gray fill so they stand apart from prose. #F4F4F4 does it with dark text such as #333333 at 11.48:1.
Table stripes: alternate rows in #F4F4F4 and white. The rows differ by only 1.09:1, so the stripes guide the eye without looking like two separate colors.
Sidebars and form fields: the same fill works behind a form label or an input that needs a faint edge.

Colors that work on it

A raspberry red such as #AA1234 reaches 6.71:1, good for links inside a code-heavy page. Brick red #C0392B gives 4.94:1, a pass for body text but with little room to spare. If you tint a syntax-highlight color, test it against the stripe too, not just against white, because every pair loses a little contrast.

Tints and shades

The tints climb from #F5F5F5 and #F6F6F6 to #FEFEFE, which is barely visible as a change. The shades are the useful part. The 10% shade is #DCDCDC, which makes a good border; it sits at 1.24:1 against #F4F4F4, so the line is quiet but still visible. Darker steps follow at #C3C3C3 (20%) and #ABABAB (30%).

Worked example

You are formatting the README for an open-source tool. The page is white, the paragraphs are #333333, and every command needs to be easy to copy. Fill the code blocks with #F4F4F4 and add a one-pixel #DCDCDC border. The command text, still #333333, measures 11.48:1 on the fill. In the options table below, stripe every second row with #F4F4F4; the first column holds the flag names in #AA1234. Because the fill is so light, the flag names stay at 6.71:1 on striped rows, and nothing needs a second look when a reader scans down the table.