Cara mengkonversi warna RGB ke HEX dengan javascript

6/09/2019 05:57:00 pm Tags:

CARA MENGKONVERSI WARNA RGB KE HEX DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Encryption using JS
Cara Mengenkripsi MD5 dengan Javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Indianaweb.blogpsot</title>
  6. </head>
  7. <body>
  8.  <h2>RGB convert to color</h2>
  9.  <div class="controls">
  10.   <input type="range" min="0" max="255" value="0" onchange="document.getElementById('redValEl').value = this.value;convert();">
  11.   Merah : <input id="redValEl" type="text" value="0" style="width: 30px;"><br><br>
  12.   <input type="range" min="0" max="255" value="0" onchange="document.getElementById('greenValEl').value = this.value;convert();">
  13.   Hijau : <input id="greenValEl" type="text" value="0" style="width: 30px;"><br><br>
  14.   <input type="range" min="0" max="255" value="0" onchange="document.getElementById('blueValEl').value = this.value;convert();">
  15.   Biru : <input id="blueValEl" type="text" value="0" style="width: 30px;"><br><br>
  16.  
  17.   <input id="hexaValue" type="text" value="#000000">
  18.  </div>
  19.  <br><br>
  20.  <div id="rgb" style="width: 100px; height: 100px;"></div>
  21.  <div id="hex" style="width: 100px; height: 100px;"></div>
  22.  
  23.  <script type="text/javascript">
  24.  
  25.   var redValEl = document.getElementById('redValEl');
  26.   var greenValEl = document.getElementById('greenValEl');
  27.   var blueValEl = document.getElementById('blueValEl');
  28.   var hexaValue = document.getElementById('hexaValue');
  29.  
  30.   var rgb = document.getElementById('rgb');
  31.   var hex = document.getElementById('hex');
  32.  
  33.   function convert() {
  34.    var red = redValEl.value;
  35.    var green = greenValEl.value;
  36.    var blue = blueValEl.value;
  37.  
  38.    var hexaColorCode = "#" + getHexa(red) + getHexa(green) + getHexa(blue);
  39.    hexaValue.value = hexaColorCode;
  40.  
  41.    rgb.style.background = `rgb(${red}, ${green}, ${blue})`;
  42.    hex.style.background = hexaColorCode;
  43.   };
  44.  
  45.   function getHexa(value) {
  46.    var hexa = parseInt(value).toString(16);
  47.    return hexa.length == 1 ? "0" + hexa : hexa;
  48.   }
  49.  
  50.  
  51.  </script>
  52. </body>
  53. </html>


Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




 Tags : 
Previous Post
Next Post
Related Posts