我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文描述两个js自定义函数,作用是色号转化,hex和rgb之间的相互转换。在css里面,色值一般有三种表达方式,以红色为例。可以描述为red,也可以描述为#ff0000,还可以表述为rgb(255 0 0)。本文描述的就是:使用js#ff0000rgb(255 0 0)相互转化。

苏南大叔:js代码,颜色hex色号和rgb色值如何转化? - 颜色值转换
js代码,颜色hex色号和rgb色值如何转化?(图2-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文的主要议题是:颜色表示方法的hex方式和rgb方式的相互转换。测试环境:win10chrome@104.0.5112.102

hexrgb

hex转换rgb的函数:

function hex2rgb(color) {
    var str = "0x" + color.substring(1, color.length);
    var r = str & 0x0000FF;
    var g = (str & 0x00FF00) >> 8;
    var b = (str & 0xFF0000) >> 16;
    return "rgb(" + b + "," + g + "," + r + ")";
}

测试代码:

console.log("#ff0000 => " + hex2rgb("#ff0000"));

输出值为:

#ff0000 => rgb(255,0,0)

苏南大叔:js代码,颜色hex色号和rgb色值如何转化? - 转换代码
js代码,颜色hex色号和rgb色值如何转化?(图2-2)

rgbhex

rgb转换hex的函数:

function rgb2hex(color) {
    var color = color.toLowerCase().replace(new RegExp(" ", "gm"), "");
    // color = color.replace("rgb","").replace("(","").replace(")","").trim();
    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;
}

测试代码:

console.log("rgb(255,0,0) => " + rgb2hex("rgb(255 , 0 ,0 )"));

输出值为:

rgb(255,0,0) => #ff0000

相关文章

综述

更多苏南大叔写的乱七八糟的代码文章,请点击下面的链接:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js    css