颜色色值转换

将十进制转换为二进制、八进制或十六进制

let num = 43;

// 二进制
console.log(num.toString(2));
// 101011

// 八进制
console.log(num.toString(8));
// 53

// 十六进制
console.log(num.toString(16));
// 2b

rgb 转换为 hex

/**
 * RGB to Hex
 * @param {Number} r 
 * @param {Number} g 
 * @param {Number} b 
 * @returns 
 */
function rbgToHex(r, g, b) {
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// rgb 转换为 hex
function rgbToHex(rgb) {
	let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
	hex.map(function(str, i) {
		if (str.length == 1) {
			hex[i] = '0' + str;
		}
	});
	return "#"+hex.join('');
}

console.log(rbgToHex(255, 0, 0)); // #ff0000
console.log(rbgToHex(255, 0, 200)); // #ff00c8

hex 转换为 rgb

/**
 * Hex to RGB
 * @param {String} hex 
 * @returns 
 */
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
console.log(hex2Rgb('#FF0000')); // { r: 255, g: 0, b: 0 }
console.log(hex2Rgb('#ff00c8')); // { r: 255, g: 0, b: 200 }

hex 转换为 rgba

// hex 转换为 rgba
function hexToRgba(hex) {
	let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
	hex = hex.replace(shorthandRegex, function(m, r, g, b) {
		return r + r + g + g + b + b;
	});
	let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
	return result ? {
		r: parseInt(result[1], 16),
		g: parseInt(result[2], 16),
		b: parseInt(result[3], 16),
		a: result[4] ? parseInt(result[4], 16) / 255 : 1,
	} : null;
}

hsb 转换为 rgb

function hsbToRgb(hsb) {
	var rgb = {};
	var h = hsb.h;
	var s = hsb.s * 255 / 100;
	var v = hsb.b * 255 / 100;

	if (s == 0) {
		rgb.r = rgb.g = rgb.b = v;
	} else {
		var t1 = v;
		var t2 = (255 - s) * v / 255;
		var t3 = (t1 - t2) * (h % 60) / 60;
		if (h === 360) h = 0;
		if (h < 60) {
			rgb.r = t1;
			rgb.b = t2;
			rgb.g = t2 + t3
		} else if (h < 120) {
			rgb.g = t1;
			rgb.b = t2;
			rgb.r = t1 - t3
		} else if (h < 180) {
			rgb.g = t1;
			rgb.r = t2;
			rgb.b = t2 + t3
		} else if (h < 240) {
			rgb.b = t1;
			rgb.r = t2;
			rgb.g = t1 - t3
		} else if (h < 300) {
			rgb.b = t1;
			rgb.g = t2;
			rgb.r = t2 + t3
		} else if (h < 360) {
			rgb.r = t1;
			rgb.g = t2;
			rgb.b = t1 - t3
		} else {
			rgb.r = 0;
			rgb.g = 0;
			rgb.b = 0
		}
	}

	return {
		r: Math.round(rgb.r),
		g: Math.round(rgb.g),
		b: Math.round(rgb.b)
	};
}

rgb 转换为 hsb

function rgbToHsb(rgb) {
	const {r,g,b} = rgb;
	var h = 0, s = 0, v = 0;
	var max = Math.max(r,g,b);
	var min = Math.min(r,g,b);
	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,b:v}
}