[JavaScript] RGB to Hex Converter

RGB

RGB代表三原色光中的Red,Green,Blue三種顏色。是螢幕顯示主要的技術，在電腦中RGB分別以0~255依序表示各自的強度，所以全黑rgb(0,0,0)到全白rgb(255,255,255)之間以比例組合而成的顏色！

HEX

HEX也是相似的原理,之前在練習前端時發現用 #e59598 來當作顏色的數值,這些組合就是所謂的十六進位(hexadecimal),也就是HEX。

十六進位數字表示方式如➡ 0 1 2 3 4 5 6 7 8 9 A B C D E F ,超過9就用字母來表示～

RGB to HEX 的題目練習

首先瞭解了轉換的原理之後,先在HTML 使用 <table>做出我們要的排版表格。

<div id="container">
    <h1> RGB to Hex Converter </h1>
    <table> //使用table排版
      <tr>  
        <td class="red"> R </td>
        <td><input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()"></td>
        <td class="r-label">255</td>
      </tr>
      <tr>
        <td class="green"> G </td>
        <td><input type="range" min="0" max="255" value="255" id="g" onchange="changeRange()"></td>
        <td class="g-label">255</td>
      </tr>
      <tr>
        <td class="blue"> B </td>
        <td><input type="range" min="0" max="255" value="255" id="b" onchange="changeRange()"></td>
        <td class="b-label">255</td>
      </tr>
    </table>
<h1 class="hex-label">#ffffff</h1>

接著是JavaScript的部分～

function changeRange(){
  //取得range裡的value並轉成數值
  let r = parseInt(document.querySelector('#r').value)
  let g = parseInt(document.querySelector('#g').value)
  let b = parseInt(document.querySelector('#b').value)
  
  let color = '#' + hex(r) + hex(g) + hex(b)
  
  // 透過style.backgroundColor設定背景顏色
  document.body.style.backgroundColor = color
  document.querySelector('.hex-label').innerHTML = color
  document.querySelector('.r-label').innerHTML = r
  document.querySelector('.g-label').innerHTML = g
  document.querySelector('.b-label').innerHTML = b
  if( r < 100 && g < 100 && b<100){
    document.querySelector('#container').style.color = 'white'
  }else{
    document.querySelector('#container').style.color = 'black'
  }
}
//將數值轉為十六進位的字串,若小於16則加上'0',回傳
function hex(x){
  let hex = x.toString(16)
  if(x< 16){
    hex = '0' + hex
  }
  return hex
}