前言
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旁边的标识符，产看更多信息。
