Js 实现十六进制颜色值和RGB颜色值转换整理

叁歲伎倆 2022-09-15 12:57 628阅读 0赞

**一、Js 实现颜色值转换处理**

js实现 十六进制颜色值转RGB颜色值

js实现 RGB颜色值 转 十六进制颜色值

[在线体验][Link 1]

[前端颜色转换 - 在线工具在线颜色值转换工具,RGB转十六进制,RGB,RGBA,HEX,HSL,WEB标准色![favicon.ico][]https://color-4gr069g4ea217b7a-1301145096.tcloudbaseapp.com/color/index.html][Link 1]

var colorChange = {
                rgbToHex: function (val) {  //RGB(A)颜色转换为HEX十六进制的颜色值
                    var r, g, b, a,
                        regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/,    //判断rgb颜色值格式的正则表达式，如rgba(255,20,10,.54)
                        rsa = val.replace(/\s+/g, '').match(regRgba);
                    if (!!rsa) {
                        r = parseInt(rsa[1]).toString(16);
                        r = r.length == 1 ? '0' + r : r;
                        g = (+rsa[2]).toString(16);
                        g = g.length == 1 ? '0' + g : g;
                        b = (+rsa[3]).toString(16);
                        b = b.length == 1 ? '0' + b : b;
                        a = (+(rsa[5] ? rsa[5] : 1)) * 100;
                        return { hex: '#' + r + g + b, r: parseInt(r, 16), g: parseInt(g, 16), b: parseInt(b, 16), alpha: Math.ceil(a) };
                    } else {
                        return { hex: '无效', alpha: 100 };
                    }
                },
                hexToRgb: function (val) {   //HEX十六进制颜色值转换为RGB(A)颜色值
                    // 16进制颜色值的正则
                    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
                    // 把颜色值变成小写
                    var color = val.toLowerCase();
                    var result = '';
                    if (reg.test(color)) {
                        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
                        if (color.length === 4) {
                            var colorNew = "#";
                            for (var i = 1; i < 4; i += 1) {
                                colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                            }
                            color = colorNew;
                        }
                        // 处理六位的颜色值，转为RGB
                        var colorChange = [];
                        for (var i = 1; i < 7; i += 2) {
                            colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
                        }
                        result = "rgb(" + colorChange.join(",") + ")";
                        return { rgb: result, r: colorChange[0], g: colorChange[1], b: colorChange[2] };
                    } else {
                        result = '无效';
                        return { rgb: result };
                    }
     
                }
            };

使用：

console.info(colorChange.rgbToHex('rgb(155,10,20)'));
            console.info(colorChange.rgbToHex('rgb(155,10,20,0.5)'));
            console.info(colorChange.hexToRgb('#ff0000'));

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_20_color_FFFFFF_t_70_g_se_x_16][]

[Link 1]: https://color-4gr069g4ea217b7a-1301145096.tcloudbaseapp.com/color/index.html
[favicon.ico]: https://color-4gr069g4ea217b7a-1301145096.tcloudbaseapp.com/color/favicon.ico
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: /images/20220828/6053440cf1de4f0abe94be518d519449.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/332ff0682a7040f98d21b8dbe9391a87.png

发表评论取消回复

表情：

评论列表（有 0 条评论，628人围观）

还没有评论，来说两句吧...

相关阅读

相关 RGB颜色值与十六进制颜色码转换

RGB颜色值"rgb(238 , 221 , 204)"与十六进制颜色码"\EEDDCC"转换 RGB颜色值是十进制的，十六进制颜色码是十六进制的。它们之间的转换其实就是十进

太过爱你忘了你带给我的痛/ 2023年06月04日 07:57/ 0 赞/ 10 阅读

相关简单整理HTML 颜色 RGB颜色值

简单整理HTML 颜色 RGB颜色值常用颜色 216 种 Web 安全色常用颜色 <table> <tbody> <tr>

太过爱你忘了你带给我的痛/ 2022年12月27日 11:17/ 0 赞/ 249 阅读

相关 Js 实现颜色值转换_Js 实现十六进制颜色值和RGB颜色值转换整理

一、Js 实现颜色值转换处理 js实现十六进制颜色值转RGB颜色值 js实现 RGB颜色值转十六进制颜色值 var colorChange = {

梦里梦外;/ 2022年12月11日 05:22/ 0 赞/ 337 阅读

相关 RGB颜色值与十六进制颜色码转换工具

[https://www.sioe.cn/yingyong/yanse-rgb-16/][https_www.sioe.cn_yingyong_yanse-rgb-16]

我不是女神ヾ/ 2022年10月02日 10:52/ 0 赞/ 231 阅读

相关 Js 实现十六进制颜色值和RGB颜色值转换整理

一、Js 实现颜色值转换处理 js实现十六进制颜色值转RGB颜色值 js实现 RGB颜色值转十六进制颜色值 [在线体验][Link 1] [前端颜色转换 - 在线

叁歲伎倆/ 2022年09月15日 12:57/ 0 赞/ 629 阅读

相关十六进制、RGB 与 VBA颜色值对照表

![在这里插入图片描述][fb5914c6b5d458903a2c1fb93bc1dddf.gif_pic_center] 十六进制、R

ゝ一纸荒年。/ 2022年08月30日 14:59/ 0 赞/ 2365 阅读

相关十六进制颜色码转换成RGB颜色值

十六进制颜色码转换成RGB颜色值相关知识点 1. 0xFF 十六进制如果转成二进制位：11111111 2. int值是32位，0的二进制： 0000000

小鱼儿/ 2022年08月08日 13:49/ 0 赞/ 305 阅读

相关 C# 调用颜色的RGB值_RGB颜色转换十六进制颜色

调用方法：如：btn\_FangTai.BackColor = Color.FromArgb(135, 206, 250); <table style="

爱被打了一巴掌/ 2022年05月31日 21:13/ 0 赞/ 476 阅读

相关【VC++实战项目】No.03 RGB颜色值和十六进制颜色代码转换工具

心血来潮写了个小工具: GitHub传送门: [https://github.com/shaoguangwu/ColorConversionTool][https_githu

阳光穿透心脏的1/2处/ 2022年04月23日 22:56/ 0 赞/ 252 阅读

相关 RGB颜色值与十六进制颜色码转换工具

链接：[https://www.sioe.cn/yingyong/yanse-rgb-16/][https_www.sioe.cn_yingyong_yanse-rgb-16]

ゞ浴缸里的玫瑰/ 2022年03月08日 05:46/ 0 赞/ 374 阅读