【JavaScript】RGB 與 HEX 色碼轉換器實作

大家都知道網頁色碼，最常被使用的就是RGB和HEX系統了。

如果要製作「能夠把RGB色碼轉成HEX色碼的轉換器」，首先必須釐清以下的問題：

1. RGB和HEX之間是如何轉換的？

2. 滑動條（slider）是怎麼製作的？

尤其是第1點，一搞懂就差不多能夠寫出程式碼了XD

RGB色彩標記方式是 RGB(X , Y, Z)，其中X、Y、Z數值為 0~255，共256個數值的區間。和光的三原色一樣，RGB色彩為紅色、綠色、藍色的混合，數值越大代表該顏色的比例越高。例如：

紅色=RGB(255, 0, 0)

白色=RGB(255, 255, 255)

而16進位色彩標示方式 ( HEX色碼)，在網頁設計中，開頭有個井字號（#），加上6位數字所組合而成。

16進位中的第11位數字開始，採用a~f英文字母來當作數字使用：

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

那麼，16進位碼的色彩標示原理是什麼呢？在網頁設計中，16進位碼色彩標示可分成三組數字，每2碼一組來表示1種色彩：

#RRGGBB，其中RR為紅色、GG為綠色、BB為藍色

其中位數越大，代表顏色越亮；也就是說第1位數「0」是最暗的，而第16位數「f」是最亮的。因此：

#000000 = 黑色

#ffffff=白色

也就是說，RGB色彩標記方式是 RGB(X , Y, Z)的三個數值，只要轉換成16進位制，就可以得知其對應的16進位碼色彩標示方式了！

RGB(X , Y, Z) 與#RRGGBB之間的關係：

紅色=X=RR

綠色=Y=GG

藍色=Z=BB

好了，所以我們可以開始來寫程式碼了～

一、10進位數字轉為16進位的javascript語法，轉換完畢後為字串：

x.toString(16)

其中x為10進位的數字，x如果是字串的話記得用Number()轉換成數字。

二、滑動條（slider）的html語法：

<form><input type=”range” class=”A” min=”B" max=”C" step=”D" value=”E"></form>

若要自定義slider的格式，可以用CSS寫個A class來改。(至於怎麼改不在本篇文章討論的範圍之內XD)

B為slider最左邊的值(最小值)、C為最右邊的值(最大值)

D可設定slider的數值間距，如果拉動1格的數值=1，那麼D=1

E為進入瀏覽畫面時，slider的起始數值

三、監聽器(Listener)的設置：

js新手如我，很容易搞不清楚要綁什麼event….最後選用mousemove，效果是只要滑鼠拖曳時就會觸發。

element.addEventListener(‘mousemove’, function)

然後因為我的CSS功力很差，這邊直接先套用Bootstrap，所以本程式碼的CSS沒有什麼參考價值(誤)。

最後作品的完整程式碼如下: