iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

用 Javascript 當個影像魔術師系列 第 9

Day 09 - 圖片色彩模型

色彩模型

在繼續往下介紹其他調整之前,要先來介紹一下色彩模型。

之前介紹的顏色展現方式我們都是用 RGB 三個通道的值來表示,也就是俗稱的 加法模型

當然前端在工作上也可能常用到的是 Hex 的表現方式 ( 也就是十六進位的RGB ),像是 #f9f9f9之類。

而這種表現方式對於人類來說不夠直覺,大家應該很難馬上判定出 #234f42 或者 [35, 79, 66] 的實際色彩吧。

所以接下來,我們將會把 RGB 轉成其他色彩模型的表現方式

HSV ( HSB )、HSL

通常如果要調整飽和度的時候,要轉換的色彩模型都會常聽到這三個 HSVHSBHSL

其中 HSVHSB 這兩個其實都代表同一種,所以我們當成同一個看,而他們又跟 HSL 差在哪呢

首先看一下 H ( Hue ) 代表著色相,在這兩種表現裡面都是一樣的。

取自wiki

H 的範圍為 0 ~ 360 代表不一樣的色相,在兩種模型裡面是一樣的

而 S 為 ( Saturation ),代表著色彩飽和度,但在這兩種模型的用法會略有差異

V ( Value) 、B ( Brightness ) 與 L ( Lightness ),代表著色彩明度,在兩種模型的用法一樣會略有差異

取自wiki

最大的差別,我覺得是在於色彩最飽和時候的差距,我們用 colorizer 網站來算出同個顏色在不同模型的參數

飽和度最高的紅色在 HSL 中為( 360 , 100 , 50) 在 HSV 中為 ( 360 , 100, 100)

在配合上方的圓錐體看,對於 HSL 來說飽和度跟亮度像是分開的概念,不管飽和度為多少,只要亮度為最高,都會變成白色,也就是說就算飽和度到達最高,HSL ( 360 , 100 , 100)的情況下,顏色為白色的情況。

推薦可以去上面那個網站實際自己操作一下,體驗一下兩者差異

至於這兩種哪一個比較適合當人機介面操作的話,這部分就見仁見智,目前好像沒有一個定論,而且實務上都有軟體使用,基本上要分辨的話只要看最上方那一排是白色的話就是使用 HSL 介面了,但偷偷看了 PhotoShop 之後,調色盤是使用了 HSV 介面,之後我們先用 HSV 試試看吧。

CSS 的表現方式是使用 HSL 喔。background-color: hsl(360, 50%, 50%);

實作

接下來看看轉換的部分吧, 這裡 有轉換數學公式,這邊就不詳細解釋,直接參考這個 實現

export const rgbToHsv = rgb => {
  let rdif
  let gdif
  let bdif
  let h
  let s

  const colorR = rgb[0] / 255
  const colorG = rgb[1] / 255
  const colorB = rgb[2] / 255
  const v = Math.max(colorR, colorG, colorB)
  const diff = v - Math.min(colorR, colorG, colorB)
  const diffc = c => {
    return (v - c) / 6 / diff + 1 / 2
  }

  if (diff === 0) {
    h = 0
    s = 0
  } else {
    s = diff / v
    rdif = diffc(colorR)
    gdif = diffc(colorG)
    bdif = diffc(colorB)

    if (colorR === v) {
      h = bdif - gdif
    } else if (colorG === v) {
      h = 1 / 3 + rdif - bdif
    } else if (colorB === v) {
      h = 2 / 3 + gdif - rdif
    }

    if (h < 0) {
      h += 1
    } else if (h > 1) {
      h -= 1
    }
  }

  return [h * 360, s * 100, v * 100]
}

小結

今天介紹了色彩在不同模型中的表現方式,對於接下來的調整,我們會使用不同的模型來做,明天見!


上一篇
Day 08 - 圖片效果 - 對比
下一篇
Day 10 - 圖片效果 - 飽和度
系列文
用 Javascript 當個影像魔術師30

尚未有邦友留言

立即登入留言