4

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

 1 year ago
source link: https://xushanxiang.com/rgb2hex-and-hex2rgb.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

作者: xusx 分类: JavaScript 发布时间: 2022-05-12 16:13 浏览：47
colors-mural.png

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

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

演示(可当工具用)

RGB 转 hex

hex 转 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)'
JavaScript

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
JavaScript

有符号右移 >>

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

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

按位与(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
JavaScript

按位或(OR) |

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

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

如果觉得我的文章对您有用，请随意赞赏。您的支持将鼓励我继续创作！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK