首先扯一些题外话，大自然是神奇的，数学是美妙的。小时候觉得枯燥的数字很无聊，现在才发现世界万物都可以用数字表示（专业名词：量化），正是自然界万物都是有规律可循，所以才有了互联网的出现，出现了图片、视频等。你可以想象你从电脑上看到的一切都是0/1组成的代码吗？当我对这个事情有了意识后，发现对自己所做的一切都有一种恍然大悟的感觉。
曾经接过一个需求：根据占用率显示不同颜色，具体为0-40%显示绿色，40%-80%显示绿色到黄色的均匀渐变，80%-100%显示黄色到红色的均匀渐变。感兴趣的朋友可以思考一下这个小问题如何实现。不了解颜色表示原理，可能没啥思路。看完本文你会有思路的。
基础知识
任何颜色都是由三种最基本的颜色叠加形成的，这三种颜色称为“三基色”。
人的眼睛看到的颜色有两种：
叠加型原色: 光体发出的颜色，比如：计算机显示器屏幕显示的颜色。 又称加色模式（RGB模式），三基色：红、绿、蓝。使用这三种原色可以产生其他颜色，若将此三原色的强度均调至最大并且等量重叠时，则会呈现白色。消减型原色: 物体本身不发光，而是反射的光产生，比如：印刷技术。 又称减色模式（CMYK模式），三基色：青、洋红、黄，还包括黑色。
本文只介绍RGB模式，其他的可以了解百度百科：baike.baidu.com/item/十六进制颜色…
关于存储单元
对于一个16进制码为：#000000的颜色，二进制表示为：[0000 0000][0000 0000]...，共48位，6个字节（每个字节（Byte）占用4个字符，8个bit）。所有的图片都是由若干像素组成，每个像素点都是一个颜色的表示，最初的图片每个像素都有RGB通道，占用6byte，一个一寸照（大概300*400像素）大概300*400*6byte=720kb，OMG，太大了有木有，所以在很早之前就出现了图片压缩的技术，有无损压缩、有损压缩，有的压缩技术原理是n*0这种形式存储（即连续的0/1），可以大大减少存储空间，图片压缩技术有一个很有名的算法：赫夫曼算法，感兴趣的可以了解一下他的原理，后续有机会写一篇赫夫曼的文章，链接过去。
表示方法
RGB（#000000或rgb(0,0,0)）
#000000表示R/G/B三种颜色的发光强度，R代表红色，G代表绿色，B代表蓝色。
#000000都不发光即为黑色。#FFFFFF都发光时为白色。#FFFF00RG发光B不发光为黄色。以此类推...
HSL（hsl( 240,100%,50%)）
Hue：色相，决定色系。
范围0-360，0代表红色R，120代表绿色G，240代表B，期间是均匀渐变。Saturation：饱和度，决定灰度。
范围0-100%，数值越大，饱和度越高，越小看起来越偏灰，如下图。Lightness：亮度/明度，决定白度（亮度）。
范围0-100%，数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
看到这你应该知道最开始的问题怎么解决了吧？
- HSV
Hue、 Saturation、 Value，与HSL类似。
- HEX
待补充...
颜色转换
RGB→HSL的算法描述：baike.baidu.com/item/HSL/14…
颜色开发工具
颜色使用指南：htmlcolorcodes.com/zh/jiaochen…
配色方案：htmlcolorcodes.com/zh/yanse-xu…
js插件
jscolor、jscolorpicker插件
