Cara Membuat Convert Kode RGB Menjadi HEX Dengan Javascript -

Pada kesempatan kali ini saya akan membahas artikel tentang bagaimana cara membuat convert kode rgb menjadi kode hex menggunakan javascript, karena penggunaan warna sering di temukan dalam file CSS bisa memakai kode RGB ataupun kode HEX .Supaya sahabat Dumet tidak penasaran mari ikutin langkah-langkah berikut ini:Langkah Pertama sahabat siapkan struktur HTML nya :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Code RGB ke HEX</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <table>
      <tr>
        <th>Red</th>
        <th>Green</th>
        <th>Blue</th>
      </tr>
      <tr>
        <td><input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()"></td>
        <td><input type="range" min="0" max="255" value="255" id="g" onchange="changeRange()"></td>
        <td><input type="range" min="0" max="255" value="255" id="b" onchange="changeRange()"></td>
      </tr>
      <tr>
        <td id="label-r">255</td>
        <td id="label-g">255</td>
        <td id="label-b">255</td>
      </tr>
    </table>
    <h1 id="label-hex">#ffffff</h1>
  </div>
</body>
</html>

Langkah Kedua sahabat siapkan CSS ketikan seperti dibawah ini:

.container {
  width: 800px;
  margin:auto;
  border: 2px dotted #9E9992;
  box-shadow: 0px 0px 30px #FFEA04;
  text-align: center;
}

table{
  width:100%;
  padding: 10px;

  text-align: center;
}

h1{
  margin-top: 100px;
  font-size: 30px;
  background: #999999;
  display: inline-block;
  padding: 10px;
}

input[type=range]
{
  width: 200px;
  height: 50px;
}

Langkah selanjutnya ketikkan script dari Javascript-nya seperti berikut ini:

<script>
    function changeRange() {
      var r = parseInt(document.getElementById('r').value);
      var g = parseInt(document.getElementById('g').value);
      var b = parseInt(document.getElementById('b').value);

      var color = "#" + hex(r) + hex(g) + hex(b);

      document.body.style.backgroundColor = color;
      document.getElementById("label-hex").innerText = color;
      document.getElementById("label-r").innerText = r;
      document.getElementById("label-g").innerText = g;
      document.getElementById("label-b").innerText = b;

      if (r < 100 && g < 100 && b < 100) {
        document.getElementById("container").style.color = "white";
      }else{
        document.getElementById("container").style.color = "black"
      }
    }

    function hex(v) {
      var hex = v.toString(16);
      if (v < 16) {
        hex = "0" + hex;
      }
      return hex;
    }
  </script>

Jika sudah coba jalankan pada browser masing-masing dan lihat hasilnya seperti dibawah ini:

Tampilan sebelum diberikan nilaiÂ :

2. Tampilan sesudah diberikan nilaiÂ :

saya rasa cukup pembahasan artikel tentang cara membuat convert kode rgb menjadi kode hex dengan javascript, semoga bermanfaat dan selamat mencoba.

Cara Membuat Convert Kode RGB Menjadi HEX Dengan Javascript

Kategori