RGBA、ARGB和HEX颜色格式转换javascript实现

最新推荐文章于 2024-06-19 09:43:53 发布

梦想称为大佬

最新推荐文章于 2024-06-19 09:43:53 发布

阅读量3.5k

点赞数 1

分类专栏： css HTMLcss 文章标签： html qt css

本文链接：https://blog.csdn.net/xawjz/article/details/120140956

版权

HTMLcss 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

RGB指的是格式为（255，255，255）的颜色值

A指的是透明度，大小在0-1之间

HEX是#FFFFFF格式，分别对应RGBA中的数值。

RGBA是RGB+A ：（255，255，255，1）

ARGB是A+RGB：（1，255，255，255）

HEX是：#FFFFFF99 （最后两位十六进制位是透明度）

----如果想要HEX格式与RGB格式互相转换直接进行进制转化即可。

----如果需要RGBA或者ARGB格式转换为HEX的话，需要将范围为0-1的透明度处理一下。

（多读几遍理解一下这一段话）

处理方式就是将0-1先乘以255，这样做的原因是，HEX格式中末尾的两位十六进制透明度显示与前六位十六进制位的颜色是一致的。这样就需要先将0-1的透明度放大255倍

具体算法参考：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式练习,将RGBA转换为HEX格式</title>
</head>
<style>

</style>

<body>
    <h4>题目描述：</h4>
    <p>将:
         <br>
        <strong>.container { color: rgba(255, 255, 255, 0.6); }</strong>
        <br>
        中的RGBA格式转换为HEX格式如下 <br>
        <strong>.container {color: #ffffff99;}</strong>
    </p>
    <p></p>
    <hr>
    <button onclick="location.reload()">刷新页面</button>
</body>
<script>
    console.log('转换之前：' + `.container {color: rgba(255, 255, 255, 0.6);}`);
    console.log('转换之后：' + translateColor(`.container {color: rgba(255, 255, 255, 0.6);}`));

    // rgba(255, 255, 255, 0.6) => #ffffff99
    function translateColor(str) {
        let reg = /rgba\(.*\)/g;
        let HEX = '';
        let RGBA = reg.exec(str)[0];
        HEX = transRgba(RGBA);
        str = str.replace(RGBA, '#' + HEX)
        return str;
    }
    function transRgba(rgba) {
        let result = '';
        let reg = /\(.*\)/;  //字符串匹配括号内的子串
        let arr = []
        result = reg.exec(rgba)[0];  // 截取'(255,255,255,0.6)'
        result = result.substr(1, result.length - 2); //截取十进制的'255,255,255,0.6'
        arr = result.split(','); //字符串切割 ['255','255','255','0.6']
        for (let i = 0; i < arr.length; i++) {
            arr[i] = parseFloat(arr[i]); //字符串类型转为浮点数类型
            if (i == arr.length - 1) {  //对于最后一个透明度数据，需要先将0-1的数值*255
                arr[i] = arr[i] * 255;
            }

            arr[i] = trans10to16(arr[i]);
        }
        return arr.join('');
    }
    function trans10to16(num10) { //十进制转十六进制
        let rusult = 0;
        result = num10.toString(16);
        return result;
    }
</script>

</html>

梦想称为大佬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
RGBA、ARGB和HEX颜色格式转换javascript实现

RGB指的是格式为（255，255，255）的颜色值A指的是透明度，大小在0-1之间RGBA是RGB+A ：（255，255，255，1）ARGB是A+RGB：（1，255，255，255）HEX是#FFFFFFFF格式，分别对应RGBA中的数值。
复制链接

扫一扫

专栏目录