Skip to content
ColorDB.org
Menu
Color Detail

Gray

Gray supports hierarchy, depth, and tone balance without competing with more saturated colors.

Neutrals

#6B7280

neutralinterfacemutedbalance

Color values

Hex
#6B7280
RGB
rgb(107, 114, 128)
HSL
hsl(220, 9%, 46%)

Overview

Gray is a neutral color with the hex value #6B7280. It usually acts as structural support for hierarchy, layout, text, borders, and quiet surfaces rather than as a strong expressive accent.

A useful gray can make a whole interface feel more polished by balancing brighter colors and clarifying depth.

Symbolism and context

Gray often suggests balance, practicality, restraint, technical polish, or quiet support.

The temperature of the gray matters. A warm gray feels different from a blue-gray or slate neutral.

Common design uses

  • • muted text and support copy
  • • borders, dividers, and surface layers
  • • cards, panels, and table structure
  • • background transitions and layout depth
  • • balance against stronger accent colors

Pairing guidance

Gray pairs with almost every family, but the exact temperature should match the rest of the palette.

Use darker grays for readable text, lighter grays for surfaces, and mid grays for borders or muted content.

If a layout feels flat, the neutral scale may need more contrast rather than more accent colors.

Accessibility notes

Gray is one of the most commonly misused accessibility colors because muted text can become too faint very quickly.

Test gray text on white, off-white, and dark surfaces before assuming it is subtle in a good way.

Check this color in the contrast checker

Related colors

Black#111111White#FFFFFF

Related tools

Convert this colorTranslate the same color into HEX, RGB, HSL, or HSV.Check contrastTest text, buttons, and surfaces before using the color in UI.Generate shades and tintsBuild lighter and darker variants for surfaces, hover states, and text.Build a paletteSee how this color behaves once it becomes part of a broader system.

Explore this family

Family pages help compare colors that share a broader visual role, making it easier to move from one isolated swatch to a more usable palette direction.

Browse Neutrals

Keep learning

FAQ

Questions people usually ask next

What is the hex value of Gray?

The hex value is #6B7280.

What family does Gray belong to?

Gray belongs to the neutrals family in ColorDB.

Is Gray good for text?

It depends on the background. Test the exact contrast pair before using it for text or small UI labels.

What colors pair well with Gray?

Good pairings depend on the intended mood. Neutrals are usually a safe starting point, and related colors from the same family can create a smoother palette.

Can I use Gray in CSS?

Yes. You can use its HEX, RGB, or HSL value in CSS.