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