颜色的命名

项目中使用了SASS，一直觉得颜色的命名很乱，比如会有$menu-border-color/$menu-color，这两个颜色很可能是一样的，而且你完全看不出究竟是一个什么样的颜色。

所以我觉得有必要有一个工具告诉你对应的颜色应该叫什么名字。于是我写了一个小工具ColorNamer。

github地址：https://github.com/CraryPrimitiveMan/ColorNamer

demo地址：http://craryprimitiveman.github.io/demos/colornamer/

基于colpick-jQuery-Color-Picker项目实现。样子如下：

其主要思想就是先有一个颜色和name的对应表，当你拿到一个颜色要获取其名字时，就根据之前的对应表，一一查找，比较出相差最小的颜色（即图中的Similar Color），取其名字（即图中的Color Name）命名。

其核心代码使如何计算两个颜色的差值。代码如下：

//  get the difference between two colors

var diff = Math.sqrt(Math.pow((colorRGB.r - rgb.r), 2) + Math.pow((colorRGB.g - rgb.g), 2) + Math.pow((colorRGB.b - rgb.b), 2));

其中的colorRGB和rgb分别是要比较的两个颜色。diff就是两个颜色的差值，只需要计算出所有颜色与其的差值，找到最小值即可。

如果你觉得在SASS中要写一个component，如果使用名字如$white，觉得不能代表component的内容，可以在component的开头重新定义一个变量如$menu-border-color:$black。