如何用JavaScript快速构建一个长尾词颜色选择器？

本文共计3038个文字，预计阅读时间需要13分钟。

目录 + 颜色模型 + HSV 与 HSL 的区别 + 实现选择器 + 颜色相关 + 亮度和透明度 + HSV转RGB + 透明度 + 基于HSL的颜色选择器 + 使用Canvas + 前端界面开发时，遇到需要改变颜色的需求，就需要使用颜色选择器

目录

• 颜色模型
• HSV 与 HSL 的区别
• 实现选择器
• 色相
• 饱和度和明亮度
• hsv转rgb
• 透明度
• 基于HSL的颜色选择器
• 使用canvas

在做前端界面开发的时候，遇到需要改变颜色的需求，就需要使用颜色选择器。

针对这个问题，第一想法，自然是H5提供了input color，可以实现。但不出意外的，IE并不支持。而且，chrome的实现方式和firefox也不太一样，见下图：

左图是chrome的，浏览器自身实现的一个颜色选择器控件；右图是firefox的，引入的是操作系统自带的颜色选择器控件。

鉴于这些差异性，就很有必要实现一个统一的颜色选择器组件，譬如我们来实现一个类似chrome浏览器自带的这种选择器。

要做这个组件，首先需要了解的一个知识点，就是颜色模型。