Skip to Content

What is grey color code in HTML?

What is grey color code in HTML?

Grey is a neutral color that is very common in web design. When coding websites in HTML, there are several ways to specify the grey color using hexadecimal color codes or RGB values.

Hexadecimal Grey Color Codes

The hexadecimal color system uses six digits to represent colors, with each pair of digits representing the intensity of red, green, and blue. Here are some common hexadecimal codes for shades of grey:

Color Name Hex Code
Dark grey #A9A9A9
Dim grey #696969
Grey #808080
Light grey #D3D3D3
Slate grey #708090

The hex code is defined using the # symbol, followed by six hexadecimal digits representing the RGB values. For example, #A9A9A9 is the hex code for dark grey.

RGB Grey Color Codes

RGB color codes use decimal values to represent the intensity of red, green, and blue on a scale from 0 to 255. Here are RGB codes for some common shades of grey:

Color Name RGB Code
Dark grey 169, 169, 169
Dim grey 105, 105, 105
Grey 128, 128, 128
Light grey 211, 211, 211
Slate grey 112, 128, 144

RGB codes are defined by specifying the R value first, followed by G and B. For dark grey, the RGB code is 169, 169, 169.

Grey Color Names

In addition to hex and RGB codes, HTML and CSS also support color names for specifying grey shades including:

  • Gainsboro
  • Lightgrey
  • Silver
  • Darkgray
  • Grey
  • DimGrey
  • Lightslategrey
  • Slategrey
  • Darkslategrey

For example, you can use “grey” or “darkslategrey” as CSS color property values instead of hex or RGB codes.

Shades of Grey

There are many different shades of grey available between black and white. Here are some common shades from darkest to lightest:

Shade Name Hex Code
Charcoal grey #36454F
Dark slate grey #2F4F4F
Davys grey #555555
Dim grey #696969
Grey #808080
Spanish grey #989898
Light grey #D3D3D3
Gainsboro #DCDCDC

Using lighter or darker shades of grey can help create contrast and visual hierarchy in web page designs.

Using Grey in Website Design

Grey is very versatile and can be incorporated into website designs in various ways:

  • Light grey backgrounds provide subtle contrast behind text or other content.
  • Medium grey tones work well for secondary interactive elements like buttons.
  • Darker greys can be used for borders, dividers, and lines.
  • Grey text is easy to read against white or other light backgrounds.
  • Different grey shades help visually separate sections or elements.

However, large blocks of grey can appear dull or monotonous. Use greys sparingly and in combination with more vibrant accent colors.

Grey Color Psychology

In color psychology, grey has the following symbolic associations:

  • Neutrality, balance, composure
  • Sadness, boredom
  • Conservative, formal
  • Sophisticated, refined
  • Intellectual, knowledgeable

Lighter greys suggest stability and calmness, while darker shades can symbolize grief, loss, or depression. Using the right tones can evoke certain moods and emotions.

Accessibility Considerations

Grey provides enough contrast against white backgrounds to meet WCAG accessibility standards. However, very light greys do not provide sufficient contrast against white for legible text. When using grey, ensure there is adequate contrast by:

  • Avoiding light grey text on white backgrounds
  • Using darker greys for text
  • Providing sufficient contrast between foreground and background colors
  • Testing contrast ratios to ensure accessibility

Proper use of grey color contrast helps make websites usable for people with visual impairments or color blindness.


Grey is a versatile neutral color that has many shades and variations. In HTML and CSS, grey can be specified using hexadecimal codes like #808080, RGB values like rgb(128, 128, 128), or color names like “grey.” It is widely used in web designs to create subtle backgrounds, elegant text, and effective visual contrast between elements. With proper usage, the color grey can make websites clean, readable, and accessible to all users.