JavaScript实现在线RGB与HEX颜色互转工具
本文详细介绍如何使用JavaScript开发一个在线RGB与HEX颜色互转工具。内容涵盖RGB加法色彩模型原理、十六进制颜色编码规则，以及具体的转换算法实现。通过示例代码展示如何将RGB值转换为HEX格式，反之亦然，帮助前端开发者快速集成颜色处理功能。
背景
当前网页版在线工具已十分普及，许多传统桌面软件如Photoshop绘图功能也实现了网页化，使得网页设计更加便捷。鉴于实际项目中频繁涉及颜色转换需求，本文旨在开发一个轻量级的在线颜色转换工具。
RGB转HEX
效果
代码
<html>
<head>
<meta charset="utf-8" />
<title>颜色在线转换</title>
<style type="text/css">
</style>
</head>
<body>
<!---->
<div style="display: flex; margin-top: 100px;">
<div style="display:flex;width:260px;">
<div style="width:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;">
<span>RGB</span>
</div>
<div style="width:200px;height: 33px;line-height: 33px;border: 1px solid #ccc;">
<input id="txtRgb" placeholder="请输入RGB值 如:255,255,255" style="width:100%;padding: 7px 7px;outline: none;background: none;border: none;">
</div>
</div>
<div style="height: 35px; line-height: 35px;padding:0 10px;">
<span>转为</span>
</div>
<div style="display:flex;width:260px;">
<div style="width:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;">
<span>HEX</span>
</div>
<div style="width:200px;height: 33px;line-height: 33px;border: 1px solid #ccc;">
<input id="txtHex" readonly="readonly" style="width:100%;padding: 7px 7px;outline: none;background: none;border: none;">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var rgb = document.getElementById('txtRgb');
var hex = document.getElementById('txtHex');
rgb.onkeyup = function () {
if (rgb.value && rgb.value.split(',').length == 3) {
var hexValue = rgbToHex("rgb(" + rgb.value + ")");
hex.value = hexValue;
}
}
//
function rgbToHex(rgb) {
// 使用正则表达式提取出数字部分
var rgbArray = rgb.match(/\d+/g);
// 将 RGB 分量转换为十六进制，并补零
var r = parseInt(rgbArray[0]).toString(16).padStart(2, '0');
var g = parseInt(rgbArray[1]).toString(16).padStart(2, '0');
var b = parseInt(rgbArray[2]).toString(16).padStart(2, '0');
// 将结果拼接为 HEX 格式
var hex = '#' + r + g + b;
return hex;
}
</script>
HEX转RGB
效果
代码
<html>
<head>
<meta charset="utf-8" />
<title>颜色在线转换</title>
<style type="text/css">
</style>
</head>
<body>
<!---->
<div style="display: flex; margin-top: 50px;">
<div style="display: flex; width: 260px;">
<div style="width:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;">
<span>HEX</span>
</div>
<div style="width: 200px; height: 33px; line-height: 33px; border: 1px solid #ccc;">
<input id="txtHex2" placeholder="请输入HEX值 如:#FFFFFF" style="width:100%;padding: 7px 7px;outline: none;background: none;border: none;">
</div>
</div>
<div style="height: 35px; line-height: 35px;padding:0 10px;">
<span>转为</span>
</div>
<div style="display: flex; width: 260px;">
<div style="width:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;">
<span>RGB</span>
</div>
<div style="width: 200px; height: 33px; line-height: 33px; border: 1px solid #ccc;">
<input id="txtRgb2" readonly="readonly" style="width:100%;padding: 7px 7px;outline: none;background: none;border: none;">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var hex2 = document.getElementById('txtHex2');
var rgb2 = document.getElementById('txtRgb2');
hex2.onkeyup = function () {
if (hex2.value.length == 7) {
var rgbValue = hexToRgb(hex2.value);
rgb2.value = rgbValue;
}
}
//
function hexToRgb(hex) {
// 去掉 # 号并分割成 r、g、b 三个部分
var hexValue = hex.replace('#', '');
var r = parseInt(hexValue.substring(0, 2), 16);
var g = parseInt(hexValue.substring(2, 4), 16);
var b = parseInt(hexValue.substring(4, 6), 16);
// 返回 RGB 格式字符串
var rgb = 'rgb(' + r + ', ' + g + ', ' + b + ')';
return rgb;
}
</script>
什么是RGB
RGB（红绿蓝）是一种加法色彩模式，通过组合不同强度的红、绿、蓝光来生成各种颜色。
在RGB模式下，颜色由红色、绿色和蓝色三种成分混合而成。
通过调整这三种颜色的深浅程度，可以混合出数百万种不同的颜色。
在前端开发领域，RGB常用于定义网页或应用程序中的颜色值。
RGB原理
RGB颜色模型属于加法混合模式，通过调节红、绿、蓝三原色的亮度来呈现色彩。
每种颜色的亮度范围介于0到255之间，其中0代表完全黑暗，255代表最亮。通过调整这三个分量的值，可以生成所有其他颜色。
当红、绿、蓝三个分量的值均为最小值0时，结果为黑色；当三个分量均为最大值255时，结果为白色。
通过增加或减少一个或多个原色的值，可以得到任意其他颜色。
例如，将红色分量设为最大值255，而绿色和蓝色分量设为0，即可得到纯红色。同理，单独将绿色或蓝色设为最大值255，其余为0，可分别得到纯绿和纯蓝。
在CSS中，颜色值可使用RGB格式表示，如rgb(255, 0, 0)代表纯红色。第一个参数为红色分量值，第二个为绿色分量值，第三个为蓝色分量值。通过调整这些分量的值，可以获得所需颜色。
HEX16
十六进制（Hexadecimal）
十六进制颜色值（HEX16）是由六个十六进制数字组成的编码，用于表示RGB颜色空间中的颜色。
每个十六进制数字可取0-9的数字及A-F的字母，共16种可能值，因此称为十六进制。
在HTML和CSS中，常用“#”符号后跟六个十六进制字符来表示颜色值。
例如，红色的十六进制值为#FF0000，前两个字符表示红色分量，中间两个表示绿色，最后两个表示蓝色。
通过将每个分量的十六进制值转换为十进制（即从16进制到10进制的转换），可以得到每个分量的值，进而得到完整的RGB值。
HEX16色全名是十六进制颜色值的完整名称，这些名称是根据对应的颜色值或颜色特征命名的。以下是一些常见的HEX16色全名示例：
- #FF0000: 红色
- #00FF00: 绿色
- #0000FF: 蓝色
- #FFFFFF: 白色
- #000000: 黑色
- #FFFF00: 黄色
- #FF00FF: 品红色
- #00FFFF: 青色
- #808080: 灰色
- #FFA500: 橙色
这仅是一小部分示例，实际上可使用数百种不同的HEX16色全名来描述各种颜色。每种颜色都有其特定的HEX16色全名，用于更准确地识别和描述颜色。
以上就是使用javascript开发在线RGB颜色转换器的详细内容，更多关于javascript在线RGB颜色转换的资料请关注本站其它相关文章！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18