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

最新推荐文章于 2024-05-26 11:26:33 发布
最新推荐文章于 2024-05-26 11:26:33 发布
阅读量2.9k 收藏 4
点赞数 1
分类专栏： 有趣的小东西 文章标签： 前端UI必备
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43684896/article/details/84870337
版权

七亿少女的劫丨

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    body{
        background-color:#E6E6FA;
    }
    .color{
        width: 60px;
        height: 40px;
    }
    input{
        width: 60px;
        text-align: center;
    }
.table td, .table th {
 vertical-align: middle; 
}
</style>

<body>
    <table class="table">
        <tbody>
            <tr>
                <td>
                    R: <input value="255" type="text" name="R" class="num" maxlength="3" style="color: red" 
                    onKeyPress="getkey(event, 0)">
                    G: <input value="180" type="text" name="G" class="num" maxlength="3" style="color: green"
                        onKeyPress="getkey(event, 0)">
                    B: <input value="0" type="text" name="B" class="num" maxlength="3" style="color:blue" 
                    onKeyPress="getkey(event, 0)">
                    <button onclick="torgb()">转换</button>
                </td>
                <td>
                    <div id="color1" class="color"></div>
                </td>
                <td>
                    <div id="lab1"></div>
                </td>
            </tr>
            <tr>
                <td>
                    # <input value="CC00FF" type="text" name="B" class="rgb" maxlength="6" style="text-align: left" onkeypress="getkey(event, 1)" spellcheck="false" />
                    <button onclick="tonum()">转换</button>
                </td>
                <td>
                    <div id="color2" class="color"></div>
                </td>
                <td>
                    <div id="lab2"></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    function torgb() {
        var hexcode = "#";
        var lab1txt = "";
        for (var i = 0; i < 3; i++) {
            var n = document.getElementsByClassName('num')[i].value;
            if (parseInt(n) != n) {
                return alert("请输入整数（0~255）");
            } else if (n < 0 || n > 255) {
                return alert("请输入0~255的整数")
            } else {
                var str = "0123456789ABCDEF",
                    space = "",
                    key = n % 16;
                space = str.substr(key, 1);
                key = (n - key) / 16;
                hexcode += str.substr(key, 1) + space;
            }
        }
        document.getElementById("color1").style.backgroundColor = hexcode;
        document.getElementById("lab1").innerHTML = hexcode;
    }
    function tonum() {
        var lab2txt = "";
        var num = [];
        var rgb = "0123456789ABCDEF";
        var str = document.getElementsByClassName('rgb')[0].value;
        str = str.toUpperCase();
        if (str == "") str = "000000";
        for (var i = 0; i < 3; i++) {
            num[1] = str.substr(i * 2, 2);
            num[2] = num[1].substr(0, 1);
            num[2] = rgb.indexOf(num[2]) * 16;
            num[3] = num[1].substr(1, 1);
            num[3] = rgb.indexOf(num[3]) * 1;
            num[10 * i] = num[2] + num[3];
        }
        document.getElementById("color2").style.backgroundColor = "#" + str;
        document.getElementById("lab2").innerHTML = num[0] + " , " + num[10] + " , " + num[20];
    }
    function getkey(e, n) {
        var keynum;
        if (window.event) keynum = e.keyCode;
        else if (e.which) keynum = e.which;
        if (keynum == 13) {
            if (n == 0) torgb();
            else tonum();
        }
    }
</script>
</html>

ps:
1.rgb颜色值转换成十六进制颜色码
rgb颜色值列如#cdcdcd，每两位为一个0-255的数字，
用substr（0，2），substr（2，2），substr（4，2）划分出cd，cd，cd，
再把cd，cd，cd，划分 为 三组c，d 进行数字转换，
c是16的一次方位，所以 用c在0123456789ABCEDF 出现的位置 乘16就是c代表的数字，
同理d代表的数字就是在0123456789ABCEDF位置 乘1
c：12x16，d：13x1
所以#cdcdcd ：205 , 205 , 205
2.十六进制颜色码转换成rgb颜色值
205，205，205为例
205对16求余就是 16的 0次方值
205减去余数再除以16 就是 16的一次方的值
205%16等于13,取“0123456789ABCEDEF”.indexof(13) 为 D
205-13再除以16 等于12 取“0123456789ABCEDEF”.indexof(12) 为 C
所以第一组CD就求出来了，同理循环三次 最终可得CDCDCD。

感兴趣？ 收藏一下！RGB颜色对照表

顾以南歌
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
RGB颜色值与十六进制颜色码转换工具
10-27
RGB颜色系统和十六进制颜色码是两种广泛用于数字图像处理和网页设计的颜色表示方法。了解它们之间的转换对于创建和编辑色彩...而"RGB颜色值与十六进制颜色码转换工具"这个资源，无疑为设计师和开发者提供了极大的便利。
Excel VBA实现RGB颜色转十六进制代码.rar
09-12
例如，(255, 128, 0)的RGB值转换为十六进制颜色码为"FF8000"。 接着，我们要将RGB值转换为Excel内部使用的十进制颜色码。Excel内部颜色码是一个整数，代表了所有可能的颜色。这种转换方法稍微复杂些，因为需要查找...
颜色值进制转换
baidu_41801770的博客
05-26 412
各语言的颜色值表达式就两种，十六进制的颜色值hex$和十进制的RGB格式。//格式输入颜色值字串。//格式输入颜色值字串。//格式输入颜色值字串。//格式输入颜色值字串。//例： color$="0xffe992";hex2RGB (){ //十六进制颜色值转RGB(r, g, b)print "颜色值字串 = ",color$;test16 (){ //测试RGB转换十六进制颜色值。
RGB颜色值与十六进制颜色码转换（在线）
 我的博客
03-31 1230
RGB颜色值与十六进制颜色码转换工具：https://littlehiuman.github.io/19-ColorValueChange/ 可以根据RGB颜色值转换成十六进制颜色码， 也可以根据十六进制颜色码转换成RGB颜色值 页面UI比较粗糙，但是能实现想要的功能。 ...
RGB颜色值与十六进制颜色码怎么相互转换？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
10-17 3056
我们经常看到网上的在线工具里有RGB颜色值与十六进制颜色码转换工具，那么这个是怎么实现的呢？ 可以理解为 FF0000 + FF00 + FF，如果左移是基于十六进制计算的，则可以理解为FF
RGB颜色值与十六进制颜色码转换及颜色码对照表
Simon_LHM的博客
04-02 3970
RGB颜色值与十六进制颜色码转换 转载 ...
RGB与十六进制颜色码转换工具
qq_40851561的博客
11-10 313
RGB 16进制转换
RGB颜色如何转换为十六进制？16进制颜色代码怎么转为RGB颜色值？
boke112的博客
02-24 586
如果我只知道16进制颜色代码想要知道RGB颜色值，那么16进制颜色代码怎么转为RGB颜色值？又或者我知道RGB颜色值想要知道16进制颜色代码，那么RGB颜色如何转换为十六进制？推荐使用boke112百科的“RGB颜色值和十六进制颜色代码在线转换器”小工具。
RGB 颜色值与十六进制颜色码之间的相互转换
JeterPong's Column
12-01 2002
分享一下 RGB颜色值 与 十六进制颜色码的转换，也给自己做个备录，做开发经常能用到。1.菜鸟工具: http://c.runoob.com/front-end/55 含： RGB转16进制工具 (含有颜色参考，实用) RGB 与 HEX 颜色对照表 2.猿工具(附带取色器，功能强大!)： http://www.yuangongju.com/color 含：
RGB颜色值与十六进制颜色码互相转换代码
热门推荐
老王的IT博客
04-15 1万+
RGB颜色值是我们常用的一种颜色标准，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。形如255, 255, 255。 十六进制颜色码就是在软件中设定颜色值的代码。在很多软件中，都会遇到设定颜色值的问题，发展来源人的眼睛看到的颜色有两种：一种是发光体发出的颜色，比如计算机显示器屏幕显示的颜色；另一种是物体本身不发光，而是反射的光产生十六进制颜色。形...
推荐一个好用的RGB颜色值与十六进制颜色码转换工具
风语留痕
09-17 894
一个非常好用的RGB颜色值与十六进制颜色码转换工具。 网址：https://www.sioe.cn/yingyong/yanse-rgb-16/
RGB颜色值与十六进制颜色码转换工具.zip
04-20
在这个压缩包文件“RGB颜色值与十六进制颜色码转换工具.zip”中，包含了一个实用工具，可以帮助用户轻松进行这两种颜色表示法的互换。 RGB（Red, Green, Blue）颜色模式是基于加色原理的，通过红、绿、蓝三种基本...
JavaScript 十六进制RGB色码转换器
10-29
JavaScript 十六进制RGB色码转换器,大家可以学习下思路。
2024年全球资产管理报告：AI与下一轮转型浪潮-BCG.pdf
08-02
2024年全球资产管理报告：AI与下一轮转型浪潮-BCG.pdf
电子书：探索人工智能在 OSINT 中的作用中文版.pdf
08-02
电子书：探索人工智能在 OSINT 中的作用中文版.pdf
基于Springboot的线上历史馆藏系统（有报告） Javaee项目，springboot项目
最新发布
08-02
资源详情：https://blog.csdn.net/2302_78191516/article/details/140881816
YOLO施工工地安全图像数据集+5000张高质量图像数据集+标注完整的数据
08-02
施工工地安全图像数据集+5000张高质量图像数据集+标注完整的数据 这是一个适合初学者的数据集，用于多类分类、对象检测和跟踪。注释采用 YoloV8 格式。数据集文件夹本身中提供了分割和元数据，因此任何人都可以使用此数据来运行模型并生成结果。因为标签采用以下格式：“安全帽”、“口罩”、“无安全帽”、“无口罩”、“无安全背心”、“人员”、“安全锥”、“安全背心”、“机械”、“车辆”。在跟踪和监控应用中，一个人是否戴着安全帽非常重要。大多数数据集都没有以这种特定方式注释，这使得该数据集非常有用。 标签注释： YOLO格式（.txt） 元数据： metadata.csv 和 count.csv 提供有关数据集和 train-val-test 计数信息的信息。 ——小白不懂运行，下载完可以私聊问，可远程教学 ——有一定编程基础的朋友，可以在此源码基础上进行自由修改和扩展，实现更多个性化功能,非常适用于毕设、课设、作业等。 —— 下载后，请先阅读README.md文件（如有），以便更好地了解项目详情和使用方法。本资源仅供学习参考，切勿用于商业用途。如有任何疑问或需
帮我写一个rgb颜色转换到十六进制的python代码
04-04
其中，r、g、b分别是RGB颜色的红、绿、蓝三个分量，函数返回的是一个十六进制颜色值，以#开头，后面跟着六位十六进制数，分别表示红、绿、蓝三个分量的值。例如，rgb_to_hex(255, 255, 0)将返回'#ffff00'，表示黄色...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值