關於 HCL 顏色格式的一些筆記

關於 HCL 顏色的介紹, 以前在有個文章裏看到過:
產品配色2.0：使用HCL 色彩空間替代HSL 生成配色- 二三事
以前關於 HSL 的介紹, 說的是 HSL 比 RGB 更符合人們的視覺,
https://cdc.tencent.com/2011/...
由於 HSL 的幾個數值是色相/飽和度/亮度, 容易增減來調色,
可是按照開頭的 HCL 文章介紹, HSL 顏色也存在問題,

顏色的區別

爲了清楚展現問題, 我作了一個工具來展現色環 http://tools.mvc-works.org/co...
其中 HSL 模式, S 取, 100, L 取 61, 效果看起來是這樣,
能夠看到黃色的區域很是亮, 藍色就顯得比較暗.

固然這個顏色也是合理的, 藍色原本就是不耀眼的一種顏色.
HSL 跟直接跟 RGB 顏色對應的, 對應到藍色的像素的亮度.
用 HSL 的話, 生成顏色也算比較方便, 改變其中一個參數就好.

不過, HCL 認爲, HSL 的亮度 L 其實有問題,
當 L 顏色一致的時候, 顏色的亮度應該是基本一致的,
也就是藍色對應的統一個 L, 在相對的區域, 顏色的亮度應該大致一致,
用 HCL 渲染出來 L=61 就是這樣子, 固然黃色已經看不到了,

若是要從 HCL 當中顯示黃色, 我調了一下, L 須要調整到 91,
這個時候藍色的區域也被提高得很亮, 是接近白色的淺藍色了,

若是是 HSL 當中 L=91, 看一下效果, 這些顏色已經都接近白色了,

這也包含了 HCL 的一個區別, 就是 L=100 對應的並非白色,
在 HCL 當中 C=0, L=100 才能調出白色.

代碼計算

當前 demo 實現參考 https://github.com/worktools/... .
顏色基色使用的是 https://www.npmjs.com/package...

d3.hcl(h, c, l_[, opacity])

能夠比較快的建立一個 HSL 顏色, 而後再轉換到其餘的顏色格式,

color.formatHex()
color.formatRgb()
color.formatHsl()

另外一個模塊還有 chroma-js, 也能夠進行轉換, 可是我這邊沒有深刻用.
初步感受不如 d3-color 方便用.

D3 也是使用 HCL 比較多的場景, 圖表自動生成的顏色用 HCL 更好.
我這邊遇到的場景是生成的一個折線圖的顏色, 發現藍紫色亮度低很難看清.
因而我想到是 HCL 顏色指出的那個問題, 因此把相關的 API 扒出來試了一遍.
從效果看, 很明顯 HCL 亮度控制得比較好, 只是在色彩明豔程度有區別.
由於亮黃色跟深藍色亮度明顯不一致, 因此基本不會出如今同一個圖上了,
這樣的話, 顏色的對比沒有原來鮮豔強烈了..

原理

扒了一些資料, 大部分細節沒有弄明白, 具體的換算也沒弄清楚.
大體蒐集了一些資料, 須要的話詳查...

https://en.wikipedia.org/wiki...

http://hclwizard.org/why-hcl/

原始論文 https://pdfs.semanticscholar....

一個系統介紹了顏色的博客 https://www.jianshu.com/u/9d9...