What are the Chrome developer-tools highlight colors?

54

19

In past versions of Chrome, the developer tools allowed you to inspect page elements and would would highlight them in blue. Recent versions of Chrome highlight elements in blue, but also have green and orange areas as well.

What do the colors mean?

enter image description here

Synetech

Posted 2012-09-11T18:12:37.867

Reputation: 63 242

1This is what I came here for: blue #9FC4E7 green #C2DDB6 orange #F8CB9C – fastmultiplication – 2018-04-23T06:56:32.753

Answers

54

The colors represent the areas of elements corresponding to the CSS box-model.

  • Blue is the content
  • Green is the padding
  • Orange is the border
  • Red is the margin

(The choice of similar shades of orange and red are probably not the best.)

You can see this in the Metrics section of the developer tools (which is hidden by default):

enter image description here

Synetech

Posted 2012-09-11T18:12:37.867

Reputation: 63 242

0

CSS box model parameters (content/padding/border/margin).

Official docs: Inspect and Edit Pages and Styles: Examine and edit box model parameters

Nils von Barth

Posted 2012-09-11T18:12:37.867

Reputation: 191

Asked: 2012-09-11T18:12:37.867

Viewed: 43 231 times

Active: 2018-10-05T03:59:27.197