颜色值 JavaScript 换算(HSV、RGB、十六进制颜色码)
发布于: 2021 年 04 月 13 日

之前本人写过一篇有关如何使用 vue 制作颜色选择器的文章:制作颜色选择器(全)
在这篇文章中,里面我认为比较重要的一点是颜色值之间的转换,在颜色的计算中,往往需要统一的标准。
比如说 RGB、HSV、十六进制色值之间的换算是比较常用的。毕竟你也不知道到底用户会输入哪一种标准的颜色色值。
颜色值换算
以下记录一些换算方法
HSV to RGB
HSV 是指☞ Hue 色相、Saturation 饱和度、Value 明度(亮度)。
RGB 就是常说的光学三原色,R 代表 Red(红色),G 代表 Green(绿色),B 代表 Blue(蓝色)。
HSVtoRGB(h, s, v) { let i, f, p1, p2, p3; let r = 0, g = 0, b = 0; if (s < 0) s = 0; if (s > 1) s = 1; if (v < 0) v = 0; if (v > 1) v = 1; h %= 360; if (h < 0) h += 360; h /= 60; i = Math.floor(h); f = h - i; p1 = v * (1 - s); p2 = v * (1 - s * f); p3 = v * (1 - s * (1 - f)); switch(i) { case 0: r = v; g = p3; b = p1; break; case 1: r = p2; g = v; b = p1; break; case 2: r = p1; g = v; b = p3; break; case 3: r = p1; g = p2; b = v; break; case 4: r = p3; g = p1; b = v; break; case 5: r = v; g = p1; b = p2; break; } return 'rgb(' + Math.round(r * 255) + ',' + Math.round(g * 255) + ',' + Math.round(b * 255) + ')'; }
复制代码
RGB to HSV
RGBtoHSV(rgb) { rgb = this.getRGB(rgb) var rr, gg, bb, r = parseInt(rgb.red) / 255, g = parseInt(rgb.green) / 255, b = parseInt(rgb.blue) / 255, h, s, v = Math.max(r, g, b), diff = v - Math.min(r, g, b), diffc = function(c){ return (v - c) / 6 / diff + 1 / 2; }; if (diff == 0) { h = s = 0; } else { s = diff / v; rr = diffc(r); gg = diffc(g); bb = diffc(b); if (r === v) { h = bb - gg; }else if (g === v) { h = (1 / 3) + rr - bb; }else if (b === v) { h = (2 / 3) + gg - rr; } if (h < 0) { h += 1; }else if (h > 1) { h -= 1; } } return { h: Math.round(h * 360), s: Math.round(s * 100), v: Math.round(v * 100) };}
复制代码
Hue to RGB
通过单一的色相值也可以得到纯色的 rgb 值
HuetoRGB(h) { let doHandle = (num) =>{ if( num > 255) { return 255; } else if(num < 0){ return 0; } else { return Math.round(num); } }
let hueRGB = h/60 * 255; let r = doHandle(Math.abs(hueRGB-765)-255); let g = doHandle(510 - Math.abs(hueRGB-510)); let b = doHandle(510 - Math.abs(hueRGB-1020)); return 'rgb(' +r + ',' + g + ',' + b + ')'; }
复制代码
RGB to Hue
rgbArray 为{red: xxx,green: xxx,blue: xxx}
getHue (rgbArray) { let r, g, b, max, min; for(let i = 0; i < 3; i++){ r = parseInt(rgbArray.red); g = parseInt(rgbArray.green); b = parseInt(rgbArray.blue); } max = Math.max(r, g, b) min = Math.min(r, g, b) if(max == min) { return 0; } else { if( max == r && g >= b) { return 60 * (g - b)/(max - min); } else if ( max == r && g < b) { return 60 * (g - b)/(max - min) + 360; } else if (max == g) { return 60 * (b - r)/(max - min) + 120; } else if (max == b) { return 60 * (r - g)/(max - min) + 240; } }}
复制代码
Hex 十六进制颜色码 to RGB
HexTorgb (hex){ var hexNum = hex.substring(1); hexNum = '0x' + (hexNum.length < 6 ? repeatLetter(hexNum, 2) : hexNum); var r = hexNum >> 16; var g = hexNum >> 8 & '0xff'; var b = hexNum & '0xff'; return `rgb(${r},${g},${b})`; function repeatWord(word, num){ var result = ''; for(let i = 0; i < num; i ++){ result += word; } return result; } function repeatLetter(word, num){ var result = ''; for(let letter of word){ result += repeatWord(letter, num); } return result; }}
复制代码
RGB to Hex 十六进制颜色码
rgbToHex (color){ if(color.indexOf("#") != -1) { return color; } let arr = color.split(','); let r = +arr[0].split('(')[1]; let g = +arr[1]; let b = +arr[2].split(')')[0]; let value = (1 << 24) + r * (1 << 16) + g * (1 << 8) + b; value = value.toString(16); return '#' + value.slice(1);}
复制代码
以上这些就是比较常用的颜色标准换算了,作为记录篇存在
划线
评论
复制
发布于: 2021 年 04 月 13 日阅读数: 29
版权声明: 本文为 InfoQ 作者【空城机】的原创文章。
原文链接:【http://xie.infoq.cn/article/aa8eff08fc9b1c6e5e34e1bf4】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
空城机
关注
曾经沧海难为水,只是当时已惘然 2021.03.22 加入
业余作者,在线水文 主要干前端的活,业余会学学python 欢迎各位关注,互相学习,互相进步











评论