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

最新推荐文章于 2025-07-06 17:13:40 发布

原创最新推荐文章于 2025-07-06 17:13:40 发布 · 1.1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#RGB颜色值 #十六进制颜色值

在线工具专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了RGB颜色值和十六进制颜色码的概念，RGB颜色值通过红、绿、蓝三色通道变化组合成各种颜色，而十六进制颜色码则是在软件中设置颜色值的代码形式。文章还提供了RGB与十六进制颜色码相互转换的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RGB颜色值是我们常用的一种颜色标准，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。形如255, 255, 255。

十六进制颜色码就是在软件中设定颜色值的代码。在很多软件中，都会遇到设定颜色值的问题，发展来源人的眼睛看到的颜色有两种：一种是发光体发出的颜色，比如计算机显示器屏幕显示的颜色；另一种是物体本身不发光，而是反射的光产生十六进制颜色。形如#FF00000，通常有6位和3位两种。

工具地址：RGB颜色值与十六进制颜色代码转换工具

代码实现：

RGB转十六位颜色值：

    hexcode = "#";
    for (x = 0; x < 3; x++) {;
        var n = document.getElementsByName("r-value")[x].value;
        if (n == "") n = "0";
        if (parseInt(n) != n) {
            $('.loading-result-1').html('请输入数字！');
            $('.loading-result-1').removeClass('hide');
            $('.from-rgb-result').addClass('hide');
            return;
        }
        if (n > 255) {
            $('.loading-result-1').html('数字在0-255之间！');
            $('.loading-result-1').removeClass('hide');
            $('.from-rgb-result').addClass('hide');
            return;
        }
        var c = "0123456789ABCDEF",
        b = "",
        a = n % 16;
        b = c.substr(a, 1);
        a = (n - a) / 16;
        hexcode += c.substr(a, 1) + b
    }

十六位进制颜色转RGB：

    var a = $('#code-value').val();
    if (a.substr(0, 1) == "#") a = a.substring(1);
    a = a.toLowerCase();
    b = new Array();
    for (x = 0; x < 3; x++) {
        b[0] = len == 6 ? a.substr(x * 2, 2) : a.substr(x * 1, 1) + a.substr(x * 1, 1);
        b[3] = "0123456789abcdef";
        b[1] = b[0].substr(0, 1);
        b[2] = b[0].substr(1, 1);
        b[20 + x] = b[3].indexOf(b[1]) * 16 + b[3].indexOf(b[2])
    }

其中，a就是输入的十六位进制颜色码，RGB分别位b[20] + "," + b[21] + "," + b[22]。