Webstorm How to set color hints

When using Webstorm to learn the front end, I was asked in 2016-02-01 how to set the Webstorm color hint. It is said that Niang did not set the method, I looked for a set after the location found, today wrote this set method to illustrate.

Software version number: JetBrains webstorm 8.0.4

Open Step

1 file-settings

2 IDE Settings-editor

3 appearance-show CSS Color preview icon in gutter & Show CSS color Preview as background

Actual effect

The magnified part and the yellow rectangle are part of the show CSS Color preview icon in Gutter Effect: a colored small square identifies the selected color next to the line number.

The red rectangular part is the effect of the show CSS color Preview as background: The color value's background color is the selected color.