使用javascript實現(xiàn)一個在線RGB顏色轉(zhuǎn)換器
背景
目前已經(jīng)有很多網(wǎng)頁版在線小工具，之前很多窗體化的工具也逐漸網(wǎng)頁化，比如：PS畫圖軟件，也都能直接網(wǎng)頁化進行設(shè)計，
網(wǎng)頁真的是無所不能了。由于自己實際項目經(jīng)常會用到顏色轉(zhuǎn)換，所以直接自己開發(fā)個簡單版的在線顏色轉(zhuǎn)換小工具。
RGB轉(zhuǎn)HEX
效果
代碼
<html>
<head>
<meta charset="utf-8" />
<title>顏色在線轉(zhuǎn)換</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>轉(zhuǎn)為</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) {
// 使用正則表達式提取出數(shù)字部分
var rgbArray = rgb.match(/\d+/g);
// 將 RGB 分量轉(zhuǎn)換為十六進制，并補零
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');
// 將結(jié)果拼接為 HEX 格式
var hex = '#' + r + g + b;
return hex;
}
</script>
HEX轉(zhuǎn)RGB
效果
代碼
<html>
<head>
<meta charset="utf-8" />
<title>顏色在線轉(zhuǎn)換</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>轉(zhuǎn)為</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（紅綠藍）是一種讓我們能夠創(chuàng)造出各種色彩的加法色彩模式。
在 RGB 模式下，顏色是通過混合三種紅、綠、藍的顏色成分來實現(xiàn)的。
這三種顏色可以以不同的深淺程度混合在一起，從而形成數(shù)百萬種不同的顏色。
在前端開發(fā)中，RGB 經(jīng)常被用來指定網(wǎng)頁或者應(yīng)用程序中的顏色。
RGB原理
RGB（紅綠藍）顏色模型是一種加法顏色混合模式，通過調(diào)節(jié)三種顏色的亮度來實現(xiàn)。
每種顏色有一個亮度范圍從 0 到 255，0 表示完全暗，255 表示最亮。通過調(diào)節(jié)紅色、綠色和藍色的值，可以創(chuàng)建出所有的其他顏色。
當三種原色的值都為最小值時（即為0），得到的是黑色。當三種原色的值都為最大值時（即為255），得到的是白色。
通過增加或減少其中一種或多種原色的值，可以得到任意其他顏色。
例如，紅色可以通過將紅色分量設(shè)置為最大值 255，而將綠色和藍色分量設(shè)置為最小值 0 來創(chuàng)建。
類似地，綠色和藍色都可以分別單獨設(shè)置為最大值來得到純綠和純藍顏色。
在 CSS 中，顏色值可以使用 RGB 表示，
例如 rgb(255, 0, 0) 表示純紅色。
第一個參數(shù)是紅色分量值，
第二個參數(shù)是綠色分量值，
第三個參數(shù)是藍色分量值。
通過調(diào)整這些分量的值，可以獲得所需的顏色。
HEX16
十六進制：英文名稱，Hexadecimal
十六進制顏色值（HEX16）是指由六個十六進制數(shù)字組成的顏色編碼，用于表示 RGB 顏色空間中的顏色。
每個十六進制數(shù)字可以取 0 到 9 的數(shù)字以及 A 到 F 的字母，表示 16 種可能的值，因此稱為十六進制值。
在 HTML 和 CSS 中，常用的表示十六進制顏色值的方法是在 “#” 符號后面附加六個十六進制字符。
例如，紅色的十六進制顏色值是 #FF0000，其中前兩個字符表示紅色分量的值，后面的四個字符分別表示綠色和藍色分量的值。
通過將每個分量的十六進制值轉(zhuǎn)換為十進制（即從 16 進制到 10 進制的轉(zhuǎn)換），可以得到每個分量的值，進而得到完整的 RGB 值。
HEX16 色全名是十六進制顏色值的完整名稱。這些名稱是根據(jù)對應(yīng)的顏色值或者顏色特征而命名的。以下是一些常見的 HEX16 色全名示例：
- #FF0000: 紅色
- #00FF00: 綠色
- #0000FF: 藍色
- #FFFFFF: 白色
- #000000: 黑色
- #FFFF00: 黃色
- #FF00FF: 品紅色
- #00FFFF: 青色
- #808080: 灰色
- #FFA500: 橙色
這只是一小部分例子，實際上可以使用數(shù)百種不同的 HEX16 色全名來描述各種顏色。每種顏色都有其特定的 HEX16 色全名，用于更準確地識別和描述顏色。
以上就是使用javascript開發(fā)在線RGB顏色轉(zhuǎn)換器的詳細內(nèi)容，更多關(guān)于javascript在線RGB顏色轉(zhuǎn)換的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法
今天小編就為大家分享一篇Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
使用JS實現(xiàn)一個Sleep函數(shù)的示例代碼
這篇文章主要介紹了使用JS實現(xiàn)一個Sleep函數(shù),實現(xiàn)?sleep?函數(shù)其實非常簡單，主要是理解?JavaScript?中異步執(zhí)行情況，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06
Javascript表單特效之十大常用原理性樣例代碼大總結(jié)
開頭說這個常用原理性樣例，大家可能不太清楚，這篇文章主要是針對實際開發(fā)中常用的一些代碼分析，主要是針對表單處理方法的一些資料，推薦大家收藏2016-07-07
今天小編就為大家分享一篇js正則表達式校驗指定字符串的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07
JavaScript實現(xiàn)手機號碼 3-4-4格式并控制新增和刪除時光標的位置
這篇文章主要介紹了JavaScript實現(xiàn)手機號碼 3-4-4格式并控制新增和刪除時光標的位置，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
本文通過實例代碼給大家介紹了js實現(xiàn)彈出框的拖拽效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
在網(wǎng)上看到幾個有意思的Javascript代碼，和大家分享一下。直接將代碼拷貝到IE中即可，注意代碼為一樣。不可分行2010-07-07
JavaScript中net::ERR_CONNECTION_REFUSED解決方法大全
在一次測試中遇到了報net::ERR_CONNECTION_REFUSED的錯誤,五哦一下面這篇文章主要給大家介紹了關(guān)于JavaScript中net::ERR_CONNECTION_REFUSED解決方法的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了for?of?和?for?in?的區(qū)別,for?of?和?for?in都是用來遍歷的屬性，本文重點介紹下for?of?和?for?in?的區(qū)別，需要的朋友可以參考下2022-12-12
JavaScript常用函數(shù)工具集：lao-utils
現(xiàn)在Javascript庫海量，流行的也多，比如jQuery，YUI等，雖然功能強大，但也是不萬能的，功能不可能涉及方方面面，這里給大家分享一個的JS庫是對這些的補充，很多也比較實用，把應(yīng)用到項目中中去也比較方面，這也是對工作的一些積累，也加深對知識的理解。2016-03-03