色彩模型調整

昨天完成調整飽和度，但是拉到靠近右邊時，卻發現原本看起來白色的雲卻轉變成藍色的現像。

一開始還以為是公式轉換算錯，所以用了一開始寫的 RGB 獲取工具來拿取雲上的像素( 終於派上用場了 )，然後在到之前提到的 colorizer 網站實際測試，可以用 [ 235, 241, 244 ] 下去試，會發現到調整 HSB 的飽和度時，實際上情況就是這樣沒錯，對比到第九章看到的模型，看起來就是這種色彩模型會出現的狀況。跟平常使用的時候感覺差太多了，所以看來要調整一下成別種色彩模型

說老實話這樣好像也不算錯，但從一個使用者的情境出來看這種現象的確很難接受，但也有可能是因為我是 Adobe 系列使用者，接觸的不夠多才會覺得怪，所以先調整到跟平常使用類似吧！

所以現在調整成上次介紹的另一個模型　HSL， 這裡 有轉換數學公式，一樣參考同一個 Repo 實現

我這邊就不特別貼程式碼了，跟之前一樣，只是轉換公式換掉而已，直接秀出結果。

注意看左上角的地方，看起來正常多了，也跟想像中比較接近，所以根據這些結果，推測在 PhotoShop 上，一些操作介面是使用 HSV， 但在一些其他算法上可能是用 HSL呢！

細節飽和度

昨天談到了飽和度，今天說說細節飽和度，而飽和度跟細節飽和度差別在哪呢？

翻譯不同，有可能是自然飽和度，英文是 vibrance

飽和度的調整是整張圖一起調整，所以有時候會出現有些顏色過於飽和導致很反常的現象出現。例如在人像攝影中，如果飽和度調整過高，最明顯的地方會是膚色會偏橙色，看起來會很不自然。

而在細節飽和度中，對於飽和度的調整只會調整原本飽和度偏低的像素，對於原本就已經飽和度高的像素就不會調整，所以比較不會出現過於飽和導致違反認知的顏色出現。

實作

來看一下算法的部分吧，其實跟昨天的概念一樣，只是我們需要設定一個闕值，讓低於這個值的飽和度才需要被增加。

export const vibrance = (pixelData, amount) => {
  const vibranceThreshold = 40
  for (let i = 0; i < pixelData.length; i += 4) {
    const [r, g, b] = [pixelData[i], pixelData[i + 1], pixelData[i + 2]]
    const hsl = rgbToHsl([r, g, b])
    if (hsl[1] < vibranceThreshold) {
      hsl[1] = clamp(
        hsl[1] + convertRange(amount, [-40, 40]),
        0,
        vibranceThreshold
      )
    }
    const finalRgb = hslToRgb(hsl)
    pixelData[i] = finalRgb[0]
    pixelData[i + 1] = finalRgb[1]
    pixelData[i + 2] = finalRgb[2]
  }
  return pixelData
}

先講解一下，我把這個值定義為 40 ( 當然這邊隨大家依需求調整 )，然後依照我的理解是，低於限定值的飽和度可以被增加，但是不應該超過限定值，所以用了之前實作的 Clamp。

這邊我看各個地方處理的方式不太一致，所以到底該不該超過限定值各位自行調整，我是盡量找到我覺得跟操作起來最上手的設定。

接著為了欺騙使用者，使用者互動體驗，我們用了另一個函數來映射值跟值之間的關係。

export const convertRange = (value, outputRate) => {
  const baseRate = [-100, 100]
  return (
    ((value - baseRate[0]) * (outputRate[1] - outputRate[0])) /
      (baseRate[1] - baseRate[0]) +
    outputRate[0]
  )
}

簡單來說，就是假設我們希望最後輸出的值只有 -10 ~ 10，但是輸入的值範圍是 -100 ~ 100時，幫助我們算出來最後輸出的值應該為多少，例如如果輸入的值為 10 時，最後出現的結果為 1

所以說如果不做這一層轉換的時候，會發現到滑塊移到大於 40 的時候值會完全不動，因為已經大於我們設定的闕值了，所以不管如何增加值都不會變更了，因此做了這層轉換之後，滑塊不管移到多大的時候依然會感覺圖片在變動。

小結

看一下成果吧，上方是調整飽和度，下方是調整細節飽和度。

細節飽和度的部分調整的部分可以注意涼亭下方以及左半邊的山，都算是屬於原本飽和度較低的地方。

平常在使用這兩個功能在調整的時候其實都搞不懂實際到底差在哪裡，經過這次研究之後總算比較理解差異點，以後使用上也會更小心了～明天見！