emengweb
关于 HCL 颜色的介绍, 以前在有个文章里看到过:
产品配色2.0：使用HCL 色彩空间替代HSL 生成配色- 二三事
以前关于 HSL 的介绍, 说的是 HSL 比 RGB 更符合人们的视觉,
https://cdc.tencent.com/2011/05/09/色生心中：人性化的HSL模型/
由于 HSL 的几个数值是色相/饱和度/亮度, 容易增减来调色,
可是按照开头的 HCL 文章介绍, HSL 颜色也存在问题,git
颜色的区别
为了清楚展现问题, 我作了一个工具来展现色环 http://tools.mvc-works.org/color-ring/
其中 HSL 模式, S 取, 100, L 取 61, 效果看起来是这样,
能够看到黄色的区域很是亮, 蓝色就显得比较暗.github
固然这个颜色也是合理的, 蓝色原本就是不耀眼的一种颜色.
HSL 跟直接跟 RGB 颜色对应的, 对应到蓝色的像素的亮度.
用 HSL 的话, 生成颜色也算比较方便, 改变其中一个参数就好.web
不过, HCL 认为, HSL 的亮度 L 其实有问题,
当 L 颜色一致的时候, 颜色的亮度应该是基本一致的,
也就是蓝色对应的统一个 L, 在相对的区域, 颜色的亮度应该大致一致,
用 HCL 渲染出来 L=61 就是这样子, 固然黄色已经看不到了,npm
若是要从 HCL 当中显示黄色, 我调了一下, L 须要调整到 91,
这个时候蓝色的区域也被提高得很亮, 是接近白色的浅蓝色了,mvc
若是是 HSL 当中 L=91, 看一下效果, 这些颜色已经都接近白色了,工具
这也包含了 HCL 的一个区别, 就是 L=100 对应的并非白色,
在 HCL 当中 C=0, L=100 才能调出白色.spa
代码计算
当前 demo 实现参考 https://github.com/worktools/color-ring
颜色基色使用的是 https://www.npmjs.com/package/d3-color
d3.hcl(h, c, l_[, opacity])
能够比较快的建立一个 HSL 颜色, 而后再转换到其余的颜色格式,code
color.formatHex() color.formatRgb() color.formatHsl()
另外一个模块还有 chroma-js, 也能够进行转换, 可是我这边没有深刻用.
初步感受不如 d3-color 方便用.orm
D3 也是使用 HCL 比较多的场景, 图表自动生成的颜色用 HCL 更好.
我这边遇到的场景是生成的一个折线图的颜色, 发现蓝紫色亮度低很难看清.
因而我想到是 HCL 颜色指出的那个问题, 因此把相关的 API 扒出来试了一遍.
从效果看, 很明显 HCL 亮度控制得比较好, 只是在色彩明艳程度有区别.
由于亮黄色跟深蓝色亮度明显不一致, 因此基本不会出如今同一个图上了,
这样的话, 颜色的对比没有原来鲜艳强烈了..
原理
扒了一些资料, 大部分细节没有弄明白, 具体的换算也没弄清楚.
大体搜集了一些资料, 须要的话详查...
https://en.wikipedia.org/wiki/HCL_color_space#cite_note-Pudding2005-4
原始论文 https://pdfs.semanticscholar.org/206c/a4c4bb4a5b6c7b614b8a8f4461c0c6b87710.pdf
一个系统介绍了颜色的博客 https://www.jianshu.com/u/9d9cb84f0def
文章来源：https://segmentfault.com/a/1190000023056925