#D8D3CCUnderstand. Compare. Create.
Gray: 29 shades, names and colour codes
Explore gray shades, HTML and RGB codes, colour meanings and ideas for combining gray in your projects.
Colour code and CSS reference
The CSS keyword gray corresponds to #808080. It represents one specific gray shade, not the entire colour family.
- HEX
- #808080
- RGB
- 128, 128, 128
- CMYK ≈
- 0%, 0%, 0%, 50%
- HSL
- 0°, 0%, 50%
The displayed CMYK values are estimates without a print profile.
Meaning and perception
A neutral sRGB grey has three equal channels. Tinted greys lean slightly towards blue, green or brown. These undertones become easier to see beside another grey.
Which colours go with it?
Grey does not always look neutral: it may lean towards blue, green, pink or brown. To choose a pairing, first identify its undertone and lightness. Pearl grey used as a background and charcoal used to define volumes need different companions.
Grey and pink: coordinate the undertones
Powder pink can accompany warm grey in an understated palette. If the grey already leans violet, compare several pinks before choosing: an orange pink may introduce an unexpected break. Add a dark detail to establish structure, such as charcoal shelving or dark lettering on the light areas.
Grey and yellow: choose an accent area
With light grey, ochre can create a point of interest without changing the whole palette. Bright yellow on charcoal is more assertive. First choose one place for yellow: a cushion, a document rule or an icon with a label. Then assess whether an additional echo is actually useful.
Grey and blue: avoid two indistinct surfaces
Blue grey and medium blue can be so close that the result sits awkwardly between contrast and a tonal palette. Separate their lightness: light grey with navy, or charcoal with pale blue. In a bedroom, test the wall and bedding together. In an interface, check each text area and the boundaries of input fields.
Warm grey or cool grey in a room?
Start with what will remain: stone, tiles, wood and fabrics. Place two greys with different tendencies against them instead of deciding from a screen. A grey that works with the floor may be less convincing beside the curtains. Choose for the whole setting; room orientation alone cannot prescribe a universal shade.
Try this palette: warm grey, muted pink and charcoal
Try a 65% warm-grey base, 25% muted pink and 10% charcoal. Charcoal defines the edges. If pink feels too prominent, reduce its area before making every colour paler.
#BA9391#303336Suggested palette with copyable HEX codes for your own trials. These sRGB previews are not certified paint or textile specifications.
A common trap: using only mid-tones
Three mid-greys may lack hierarchy even if they differ slightly. View the composition as a thumbnail: can you still distinguish the subject, background and details? Introduce a clearly lighter or darker area. In a document, avoid small, pale-grey lettering whose understated appearance comes at the cost of readability.
Shades of gray
The names and previews below come from the site’s shade directory. Several codes may share a common name; these shades are not certified RAL or Pantone equivalents.
#606060#5A5E6B#CECECE#EFEFEF#766F64#3D2B1F#856D4D#4E3D28#83A697#806D5A#BABABA#EDEDED#BBD2E1#BBAE98#AFAFAF#303030#677179#848484#7F7F7F#CECECE#C7D0CC#9E9E9E#BBACAC#B3B191#CCCCCC#798081#997A8D#463F32#C1BFB1Get the free colour kit: HEX/RGB codes and a project worksheet.