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

梦里梦外; 2022-12-11 05:22 337阅读 0赞

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

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

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

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][]

更多：

## [Js 取模运算、取商、取整方法][Js] ##

## [JS编码][JS] ##

## [CSS 样式异步加载][CSS] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: /images/20221123/97d24c5e396c4df0a42247d12676ea4d.png
[Js]: https://blog.csdn.net/u011127019/article/details/52117124
[JS]: https://blog.csdn.net/u011127019/article/details/17318659
[CSS]: https://blog.csdn.net/u011127019/article/details/51740438

发表评论取消回复

表情：

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

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

相关阅读

相关 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 赞/ 338 阅读

相关 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颜色值

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

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

相关 Javascript实现Web颜色值转换

原文：[http://my.oschina.net/mailzwj/blog/375624][http_my.oschina.net_mailzwj_blog_375624]

古城微笑少年丶/ 2022年08月07日 00:14/ 0 赞/ 119 阅读

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

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

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

相关【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 赞/ 375 阅读