RGB与hex(16进制)互相转换(js)

描述

将 RGB 的值转换为 十六进制 颜色代码：

1. 使用按位左移运算符 (<<) 和 Number.prototype.toString() 将给定的 RGB 参数转换为十六进制字符串。
2. 使用 String.prototype.padStart() 获取 6 位十六进制值。

演示(可当工具用)

RGB 转 hex

Convert to Hex →

hex 转 RGB

Convert to RGB →

关键代码

// 验证是否 0-255
var checkValue = function(val) {
    var v = Number(val);
    return !(val === '' || isNaN(v) || v % 1 !== 0 || v < 0 || v > 255);
};

// 验证是否是hex
// /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex)

const RGBToHex = (r, g, b) =>
  ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

function hexToRGB(hex) {
    var hexx = hex.replace('#', '0x');
    var r = hexx >> 16;
    var g = hexx >> 8 & 0xff;
    var b = hexx & 0xff;
    return `rgb(${r}, ${g}, ${b})`;
}

hexToRGB('#ffffff'); // 'rgb(255,255,255)'

js中各进制的表示方法

在 js 中，如果需要表示 16 进制的数字，则需要以 0x 开头。
如果需要表示 8 进制的数字，则需要以 0 开头。
如果要要表示 2 进制的数字，则需要以 0b 开头。
但是不是所有的浏览器都支持。

左移(Left shift)<<

<<运算符使指定值的二进制数所有位都左移指定次数，其移动规则：丢弃高位，低位补0 即按二进制形式把所有的数字向左移动对应的位数，高位移出(舍弃)，低位的空位补零。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// -----------------------------
// 2的二进制表示为: 00000000 00000000 00000000 00000010
console.log(1 << 1);  // 2

有符号右移 >>

>>该操作符会将指定操作数的二进制位向右移动指定的位数。向右被移出的位被丢弃，拷贝最左侧的位以填充左侧。由于新的最左侧的位总是和以前相同，符号位没有被改变。所以被称作“符号传播”。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// -----------------------------
// 0的二进制表示为: 00000000 00000000 00000000 00000000
console.log(1 >> 1); // 0

按位与(AND) &

&以特定的方式组合操作二进制数中对应的位，如果对应的位都为1，那么结果就是1， 如果任意一个位是0 则结果就是0。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
// -----------------------------
// 1的二进制表示为: 00000000 00000000 00000000 00000001
console.log(1 & 3); // 1

按位或(OR) |

| 运算符跟 & 的区别在于如果对应的位中任一个操作数为1 那么结果就是1。

// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
// -----------------------------
// 3的二进制表示为: 00000000 00000000 00000000 00000011
console.log(1 | 3); // 3