JavaScript, HSV 或 HSL 色碼轉換 RGB
HSL 顏色編碼為(Hue 色調、Saturation 飽和度、Lightness 亮度)。CSS 中 Hue 色調以 0 ~ 360 圓圈展開使用整數 <number> 表示為色環的角度。Saturation 飽和度和 Lightness 亮度以 0% ~ 100% 百分比表示。
以下列 range 數字滑動條,調整 Hue, Saturation, Lightness 直接顯示顏色結果。
亦可輸入 HEX (十六進位色碼) 或點選下方 216 網頁安全顏色來計算。建議在桌型電腦,行動裝置可能不太理想。
幾種 CSS 色碼轉換相關的 JavaScript 程式代碼,但整合後使用相關軟體測試比較時,例如 Photoshop 的色彩選擇器,JavaScript 色碼轉換上有些部份仍有一點點因為小數點的進位,產生了些微小差距您可以嘗試比較看看。
https://zh.wikipedia.org/wiki/HSL和HSV色彩空間
HSV 轉換為 RGB
HSV (色相、飽和度、明度) 是描述顏色的模型,可以用圓錐體來表示。HSV 轉換為 RGB (紅、綠、藍) 的過程是將圓錐體的底面切成六個扇形,每個扇形代表其中基本顏色,然後根據色相的角度和飽和度的半徑來選擇扇形內的顏色,最後根據明度的高度來調整顏色的亮度,得到 RGB 的三個分量。
function HSVtoRGB(h, s, b) {
s /= 100;
b /= 100;
let a = function (n) {
return b * (1 - s * Math.max(0, Math.min((n + h / 60) % 6, 4 - (n + h / 60) % 6, 1)));
};
return [255 * a(5), 255 * a(3), 255 * a(1)]
}
以 Array 陣列方式返回結果。
(200, 60, 10) ➔ 102, 204, 255
RGB 轉換為 HSV
function RGBToHSV(r, g, b) {
let max = Math.max(r, g, b),
min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min:
h = 0;
break;
case r:
h = (g - b) + d * (g < b ? 6 : 0);
h /= 6 * d;
break;
case g:
h = (b - r) + d * 2;
h /= 6 * d;
break;
case b:
h = (r - g) + d * 4;
h /= 6 * d;
break;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
v: Math.round(v * 100)
};
}
return 以 object 物件返回結果,乘數是為了依照 CSS 符合格式的值。
(102, 204, 255) ➔ 200, 60, 10
HEX 轉換為 RGB (十六進位)
十六進位轉換到 RGB 顏色,JavaScript 已經有 parseInt() 可以直接轉換。
function HextoRGB(hex) {
let R = parseInt("0x" + hex.substr(0, 2), 16);
let G = parseInt("0x" + hex.substr(2, 2), 16);
let B = parseInt("0x" + hex.substr(4, 2), 16);
return [R, G, B];
}
以 Array 陣列方式返回 R, G, B 結果。
(66CCFF) ➔ 102, 204, 255
RGB 轉換為 HEX (十六進位)
將 RGB 轉換為 16 進位色碼,將紅色、綠色、藍色的值從十進制轉換為十六進制。HEX (十六進制) 是用六個數字或字母來表示顏色的編碼方式,它可以用一個立方體來表示。HEX 轉換為 RGB 的過程是將六個數字或字母分成三組,每組代表一種基本顏色的強度,然後根據十六進制的規則將每組轉換為十進制的數字,得到 RGB 的三個分量。
function toFixHEX(n) {
if (n.length == 1) {
n = "0" + n;
}
return n;
}
function RGBtoHEX(r, g, b) {
let ColorR = Math.ceil(r).toString(16);
let ColorG = Math.ceil(g).toString(16);
let ColorB = Math.ceil(b).toString(16);
let ColorRGB = "#" + toFixHEX(ColorR) + toFixHEX(ColorG) + toFixHEX(ColorB);
return ColorRGB;
}
(102, 204, 255) ➔ #66CCFF