Chrome 操作指南——入门篇（十二）color picker（颜色选择器）

前言

chrome 中的颜色选择器相信大家应该很熟悉，可能大家用过最多的功能就是通过它的吸管工具，吸取页面的颜色，进行颜色取值。其实不止这些，它里面还藏着很有意思的功能的。

color palettes（调色板）

打开color palettes分别有material、custom、css variables以及page colors四个选项，每个对应相应的功能，下面我们一一来介绍。

• material：一个可以选择替代颜色的面板。鼠标左键长按相应的颜色，可弹出相近的颜色。

• custom：添加当前选择的颜色到 custom 面板中，当然也可以添加各种颜色自定义自己的 custom 面板，右键可以删除相应颜色或全部。

• css variables:声明的关于颜色所有的变量都会在这个面板中。

• page colors：当前页面所用到的颜色，都会出现在这个面板中。可以利用这个功能统计的颜色，把项目中相应的颜色都提取出来，声明成相应的颜色变量，对于做定制化主题很有帮助。

contrast ratio（对比度）

在color属性旁边打开颜色选择器，会有一个 contrast ratio（对比度）的功能。

contrast ratio（对比度）：文本颜色与该文本的背景颜色之间的对比度。如果这个数值很高，字体越明显，反之越难以区分。当值为 1 时，文本颜色与该文本的背景颜色想用。

具体可点击，当前面板的 AA、AAA 或者 contrast ratio 旁边的标识符，产看更多信息。