第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > JS换算颜色值(HSV RGB Hex 十六进制颜色码)

JS换算颜色值(HSV RGB Hex 十六进制颜色码)

时间:2020-04-15 22:47:05

相关推荐

JS换算颜色值(HSV RGB Hex 十六进制颜色码)

1、HSV to RGB

HSV 是指☞ Hue色相、Saturation饱和度、Value明度(亮度)

hsv2rgb(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) + ')';}

2、RGB to HSV

rgb2hsv(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)};}

3、Hue to RGB

通过单一的色相值得到纯色的rgb值

hue2rgb(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 + ')'; }

4、RGB to Hue

rgbArray 为

{

red: xxx,

green: xxx,

blue: xxx

}

rgb2hue(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;} }}

5、Hex十六进制颜色码 to RGB

hex2rgb(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;}}

6、RGB to Hex十六进制颜色码

function colorRGBtoHex(color) {var rgb = color.split(',');var r = parseInt(rgb[0].split('(')[1]);var g = parseInt(rgb[1]);var b = parseInt(rgb[2].split(')')[0]);var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);return hex;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。