What color is #333333?

#333333 is a dark, nearly neutral gray — rgb(51, 51, 51). Its nearest CSS named color is darkslategray.

How do I make tints and shades of #333333?

Mix #333333 with white for tints and with black for shades. A 20% tint of #333333 is #5c5c5c and a 20% shade is #292929; the full 10%–90% ramps are precomputed on this page.

What text color is readable on #333333?

White text gives the strongest contrast on a #333333 background at 12.63:1, which passes WCAG AA and AAA for normal text.

#333333 — Tints, Shades & Color Values

Every value on this page is precomputed — copy what you need.

#333333

#333333 is a dark, nearly neutral gray. Its nearest CSS named color is darkslategray (#2f4f4f). For readable text on a #333333 background, white text gives the strongest contrast (12.63:1). Because it is dark, #333333 suits text, navigation bars, and footers on light backgrounds, and its tints make natural hover and surface colors.

Want to fine-tune this color interactively? Open #333333 in the tint & shade generator to explore the full lightness, hue, and chroma scales and copy any step.

Color Values

Hex	`#333333`
RGB	`rgb(51, 51, 51)`
HSL	`hsl(0, 0%, 20%)`
HSV / HSB	`0°, 0%, 20%`
Nearest named	`darkslategray` (`#2f4f4f`)

Need these in another format? Use our hex to RGB converter for quick two-way conversion.

Tints of #333333 (Mixed with White)

Each step blends the base color toward white using new = old + (255 − old) × factor. Click a swatch to open it in the generator.

10% tint #474747
20% tint #5c5c5c
30% tint #707070
40% tint #858585
50% tint #999999
60% tint #adadad
70% tint #c2c2c2
80% tint #d6d6d6
90% tint #ebebeb

Shades of #333333 (Mixed with Black)

Each step blends the base color toward black using new = old × (1 − factor).

10% shade #2e2e2e
20% shade #292929
30% shade #242424
40% shade #1f1f1f
50% shade #1a1a1a
60% shade #141414
70% shade #0f0f0f
80% shade #0a0a0a
90% shade #050505

WCAG Contrast & Accessibility

Contrast ratios for text placed on a #333333 background. WCAG requires 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA).

Text color	White text 12.63:1 — AA normal: Pass · AA large: Pass · AAA: Pass
	Black text 1.66:1 — AA normal: Fail · AA large: Fail · AAA: Fail

If neither pure white nor pure black reaches the level you need, pick a lighter tint of #333333 from the ramps above as the background instead — small lightness moves change contrast quickly. Test any other pair with the free contrast checker.

More gray colors in the library: #27272A (zinc-800), #292524 (stone-800), #404040 (neutral-700), #44403C (stone-700), #3F3F46 (zinc-700), #525252 (neutral-600).

Frequently Asked Questions

What color is #333333?

#333333 is a dark, nearly neutral gray — rgb(51, 51, 51). Its nearest CSS named color is darkslategray.
How do I make tints and shades of #333333?

Mix #333333 with white for tints and with black for shades. A 20% tint of #333333 is #5c5c5c and a 20% shade is #292929 — the full 10%–90% ramps are precomputed on this page, or open #333333 in the generator for finer steps.
What text color is readable on #333333?

White text gives the strongest contrast on a #333333 background at 12.63:1, which passes WCAG AA and AAA for normal text.

Browse more colors in the color library, or start from any hex code on the HexTints homepage.

Building a brand around #333333? Put it on a free link-in-bio page →