本文分享 javaScript 语言的 16进制颜色 和 RGB格式颜色 之间的相互转换方法:

16进制颜色转换到RGB格式

该方法可将 16进制 颜色值转换为 RGB 或者 RGBA 格式,返回转换后的值。

/**
 * 将16进制颜色转换为RGB或RGBA格式
 * @param {string} hexColor 16进制的颜色值,如 #FF0000 或 FF0000
 * @param {number} [a=1] 透明度,取值 0 - 1,默认 1,若 a 的值 大于 1 或者 小于 0 则将返回 RGB 格式的值
 */
function hexToRgba(hexColor, a = 1) {
	// 移除前缀#符号
	hexColor = hexColor.replace(/^\s*#|\s*$/g, '');
	// 将三位十六进制转换为六位
	if (hexColor.length === 3) {
		hexColor = hexColor.replace(/(.)/g, '$1$1');
	}
	// 提取R、G、B各自的十六进制表示方式
	const r = parseInt(hexColor.substr(0, 2), 16)
	const g = parseInt(hexColor.substr(2, 2), 16)
	const b = parseInt(hexColor.substr(4, 2), 16)
	const rgb = (a < 0 || a > 1) ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`
	return rgb;
}
console.log(hexToRgba('#233453')) // rgba(35, 52, 83, 1)
console.log(hexToRgba('#233453', -1)) // rgb(35, 52, 83)

RGB格式转换为16进制

该方法可将 RGB格式 的颜色值转换为 16进制 格式的颜色值,返回转换后的值。

/**
 * 将RGB颜色转换为16进制格式
 * @param {string} rgb 格式的颜色值字符串,如 rgb(52, 180, 137)
 */
function rgbToHex(rgb) {
	// 正则表达式匹配rgb格式
	const regex = /^\s*rgb\((\d+),\s*(\d+),\s*(\d+)\)\s*$/;
	const match = regex.exec(rgb);
	if (match) {
		// 将RGB转换为十六进制格式
		return '#' + match.slice(1).map(function(x) {
			const hex = parseInt(x).toString(16);
			return hex.length === 1 ? '0' + hex : hex;
		}).join('');
	} else {
		return '';
	}
}
console.log(rgbToHex('rgb(24, 64, 123)')) // #18407b

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐