接下來的『相關度』和『標籤雲』都會加上 HSL 的方式來處理顏色。在改版發表之前, 可以到我的『HSL 測試頁』先體驗一下。
 一般的作法 線性內差 得到的『色彩漸層』中間的部分常常是 灰色 |  但是, 在 HSL 色彩空間 得到的卻是彩虹般的『紅橙黃綠藍』 |
.
HSL 色彩空間的注意事項
- 設定的 minColor, maxColor 還是以 RGB 表示的
- 直接從 .colorHSL = 0, 1, 2 選一個滿意的『視覺效果』就可以了
簡單吧 !! 
.
.
好奇寶寶分隔線
是的, 使用者只需要以 RGB 來設定顏色, 程式內部會自動換算 RGB 到 HSL,
如果你還是好奇, 希望以下這些『應用面的觀念』可以幫助進一步了解 ……
- HSL 和 RGB 色彩空間 (色座標) 有何不同?
- HSL 和 RGB 色彩空間 為何會影響『視覺效果』?
- HSL 色彩空間的其他細節
.
最後, 才是給程式設計者的參考資料:
- HSL 的程式設計參考資料
.
HSL 和 RGB 色彩空間的不同
| RGB 色彩空間
類似『直角座標』的方式 | HSL 色彩空間
類似『極座標』的方式 |
此外, 還有和 HSL 類似的 HSV (色相 hue, 飽和度 saturation, 明度 value), 詳情請看 :
- HSL和HSV色彩空間 (維基百科)
- 三原色光模式 (RGB) (維基百科)
- 色彩空間 (維基百科)
- 色彩分析[七]HSL Color space (VB6/VB2008/Server2008 程式部落格)
.
HSL 和 RGB 色彩空間的視覺效果
| 一般的作法從 青色 RGB=#00FFFF 線性內差到 紅色 #FF0000, 得到的『色彩漸層』中間的部分是 灰色 #808080 | 但是, 在 HSL 色彩空間 得到的卻是彩虹般的『紅橙黃綠藍』 |
下面的圖示可以幫助理解,
- 路徑 0 : 一般 RGB 的作法, 兩個顏色的內差路徑常常會經過中間灰色的部份
- 路徑 1 : HSL 色彩空間, 使用角度來表示 hue (色相), 所以內差路徑會呈現『弧線』或 『螺旋線』, 而經過比較多的顏色
- 路徑 2 : HSL 採用 極座標系統, 所以同樣兩個顏色之間的內差路徑可以有兩個方向
- 路徑 A : 更複雜, 但是可以自訂經過的顏色, 這是之前採用的作法, 詳情請見 依相關度排序的『相關文章』 的 optionRGB = […]
HSL 色彩空間, 使用角度來表示 hue (色相)
- R : Red = 紅色 (0度)
- G : Green = 綠色 (120度)
- B : Blue = 藍色 (240度)
- Y：Yellow ＝ 黃色 (60度)
- C：Cyan ＝ 青色 /青綠色 (180度)
- M：Magenta ＝ 洋紅色 / 品紅色 (300度)
.
把對應的 RGB 變化也一起畫出來 (在 HSL 測試頁 可以自己輸入顏色)
 0: 傳統 RGB 運算方式 | (左圖) 在簡單的線性內差之下, RGB 一起變化, 產生的視覺效果並不理想 (下左, 下圖) 經過 HSL 的換算之後, RGB 依序變化, 就變得非常精彩 |
 1: HSL不跨過0度 |  2: HSL 經過0度 (紅/紫色) |
.
HSL 色彩空間的其他細節
還有一些細節, 不見得每個人都會遇到, 下面先簡單帶過, 建議到我的『HSL 測試頁』去『實際體驗』一下, 會更有感覺, 或是隨時提出來討論
擔心被搞混的人, 就不一定要往下看囉~~
| 項目 | 測試參數 |
| 任意兩個顏色, 觀察 0, 1, 2 的不同 |
|
|
|
|
.
HSL 的程式設計參考資料
 之前在處理『相關度』和『標籤雲』的顏色時, 就在思考如何呈現出 更理想的『色彩漸層』 當時所使用的方法, 效果雖然還不錯, 但設定上比較麻煩, 也不容易理解。 所以, 除了 依相關度排序的『相關文章』功能 提到 optionRGB = […] 之外, 並沒有做太多的介紹。 |
| 這些程式, 都還沒有使用 HSL 色彩空間 來處理顏色
|
.
後來, 有機會和『標籤文章選台器』的作者 LVCHEN 討論到這方面的問題, 提到或許可以將 色座標改用 HSL (色調，飽和度，亮度）, 又不約而同找到類似的 RGB <=> HSL 轉換程式 ……
現在, 在我的程式裡看到的是『改寫的 RGB <=> HSL 轉換函數』, 產生的 HSL 只適合程式內部使用。如果要用作其他用途, 建議還是參考下面的『原出處』:
.
另外, HSL 測試頁 還用到了 JavaScript Vectorgraphics Library 來繪圖
.
0 意見:
發表您的回應張貼留言