Chrome控制台技巧秘籍：[5]拾取网页颜色编码

• 可以按下快捷键Shift+Enter，在Chrome控制台输入多行Javascript代码
• 按下上下方向键，可以按先后顺序迅速得到之前在控制台输入的代码

我们知道在Chrome控制台可以修改网页元素的颜色背景色，那么如何快速拾取网页任意区域的颜色呢？而且颜色有多种表示方法和格式，能快速转换编码吗？本文即给大家分享如何通过Chrome控制台快速获取网页颜色，并进行快速转换格式的方法。

工具/原料

• Chrome

方法/步骤

1. 首先，在Chrome浏览器打开网页。

   拿百度首页为例，要查看百度logo中的颜色准确编码。

   
2. 我们右击图片，点击“审查元素”

   当然也可以直接按下F12，进入Chrome开发者工具，定位到这个图片元素。

   
3. 进入开发者工具后，查看右侧的CSS样式

   在styles标签中，可以看到：

   element.style {

   }

   
4. 这时，点击这段代码，进入编辑CSS属性模式。

   
5. 输入color:red

   然后回车（Enter键）。

   这时会看到有个红色小方块。

   
6. 点击红色方块后，然后会弹出一个颜色选取器。

   这时不要点击任何地方，将鼠标移动网页上希望拾取颜色的区域，

   例如百度logo，可以看到一个圆框的放大镜，从中拾取很小的一个像素。

   
7. 点击想要的像素之后，即可得到颜色代码（格式是RGB形式）。

   rgb(37, 36, 228);

   这是从百度logo图片中拾取的蓝色代码。

   
8. 我们把鼠标点到其他地方，结束颜色选取的过程。

   然后再把鼠标移动颜色小方块上。

   这时会出现提示文字：

   Click to open a colorpicker.

   Shift-click to change color format.

   意思就是说，单击这个小颜色方块，可以打开颜色拾取器。

   单击时按下Shift，可以改变颜色格式

   
9. 按下Shift单击后，变成hsl格式的颜色代码：

   hsl(240, 78%, 52%)

   
10. 再来一次，变成十六进制HEX格式的颜色代码

    #2525E4

    
11.