Whenever one creates a web application, one probably needs some shades of gray: for the text, for the background, for shadows, and much more. In my experience, I usually pick rather light colors for dark gray and rather dark colors for a light background gray/white which—if not corrected—won’t make the app look cool. For people who have the same issues, I’ve created a survey of grays that are around the web. The selection of websites is very subjective. As it turns out, there is a lot of nuance to the last few least significant bits of the color code.

Light gray

#ffffff Indico, Gitlab

#f8f9fa Boostrap

#f7f7f7 Jupyter cell

#f6f6f6 Service now

#f1f3f4 Google

#f1f1f1 Youtube dark background

#eeeeee Jupyter

#ececec Indico file

#e8e8e8 Gitlab dark sidebar

#e6e6e6 Service now, button over from white

#e0e0e0 Indico file over with gradient

Medium gray

#777777 Indico

#6c757d Bootstrap gray

Dark gray

#424242 Indico

#343a40 Bootstrap

Text

#707070 Gitlab grayed user input

#6c757d Bootstrap text muted, secondary

#2e2e2e Gitlab

#212529 Bootstrap

Shadows

rgba(0, 0, 0, 0.1) Indico

rgba(0,0,0,.12) Google menu bar

rgba(87, 87, 87, 0.2) Jupyter

rgba(0,0,0,.14) Google menu bar

rgba(0,0,0,.2) Google menu bar