HSB(HSV) 轉 RGB 顏色 （js轉換公式）

HSB(HSV)概念

HSB又稱HSV，表示一種顏色模式：在HSB模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示亮度HSB模式對應的媒介是人眼。
HSB模式中S和B呈現的數值越高，飽和度明度越高，頁面色彩強烈豔麗，對視覺刺激是迅速的，醒目的效果，但不益於長時間的觀看。

色相（H,hue）：在0~360°的標準色輪上，色相是按位置度量的。在通常的使用中，色相是由顏色名稱標識的，比如紅、綠或橙色。黑色和白色無色相。
飽和度（S,saturation）：表示色彩的純度，爲0時爲灰色。白、黑和其他灰色色彩都沒有飽和度的。在最大飽和度時，每一色相具有最純的色光。取值範圍0～100%。
亮度（B,brightness或V,value）：是色彩的明亮度。爲0時即爲黑色。最大亮度是色彩最鮮明的狀態。取值範圍0～100%。

爲何需要將HSB(HSV)轉換成RGB？

  對於設計師而言，HSB(HSV)顏色是非常熟悉的，但對於web前端開發人員而言，這個顏色並不能直接用於web，因此我們需要將他轉換成web支持的顏色模式（例如：RGB）。

  注意：web支持的hsl顏色與PS(Photoshop)的HSB(HSV)顏色不是一回事！！！

RGB到HSV(HSB)的轉換:

  js代碼公式:

rgbToHsv([3,3,3]); // 輸出：[0,0,1]

//參數arr的值分別爲[r,g,b]
function rgbToHsv(arr) {
    var h = 0, s = 0, v = 0;
    var r = arr[0], g = arr[1], b = arr[2];
    arr.sort(function (a, b) {
        return a - b;
    })
    var max = arr[2]
    var min = arr[0];
    v = max / 255;
    if (max === 0) {
        s = 0;
    } else {
        s = 1 - (min / max);
    }
    if (max === min) {
        h = 0;//事實上，max===min的時候，h無論爲多少都無所謂
    } else if (max === r && g >= b) {
        h = 60 * ((g - b) / (max - min)) + 0;
    } else if (max === r && g < b) {
        h = 60 * ((g - b) / (max - min)) + 360
    } else if (max === g) {
        h = 60 * ((b - r) / (max - min)) + 120
    } else if (max === b) {
        h = 60 * ((r - g) / (max - min)) + 240
    }
    h = parseInt(h);
    s = parseInt(s * 100);
    v = parseInt(v * 100);
    return [h, s, v]
}

HSV(HSB)到RGB的轉換:

  js代碼公式:

hsvToRgb([120, 50, 100]); //輸出：[127, 255, 127]

//參數arr的3個值分別對應[h, s, v]
function hsvToRgb(arr) {
    var h = arr[0], s = arr[1], v = arr[2];
    s = s / 100;
    v = v / 100;
    var r = 0, g = 0, b = 0;
    var i = parseInt((h / 60) % 6);
    var f = h / 60 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    switch (i) {
        case 0:
            r = v; g = t; b = p;
            break;
        case 1:
            r = q; g = v; b = p;
            break;
        case 2:
            r = p; g = v; b = t;
            break;
        case 3:
            r = p; g = q; b = v;
            break;
        case 4:
            r = t; g = p; b = v;
            break;
        case 5:
            r = v; g = p; b = q;
            break;
        default:
            break;
    }
    r = parseInt(r * 255.0)
    g = parseInt(g * 255.0)
    b = parseInt(b * 255.0)
    return [r, g, b];
}