Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery

Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery

Ada beberapa tipe kode warna yang biasanya digunakan di dalam pemrograman komputer, yaitu berbentuk hexadecimal, RGB, RGBA, HSL, dan HSLA. Hexadesimal tersusun dari kombinasi huruf dan angka dengan diawali dengan tanda ‘#’. Sedangkan RGB adalah model warna berdasarkan konsep penambahan kuat cahaya primer yaitu Red, Green dan Blue yang terdiri dari 3 bagian angka yang terpisah oleh tanda koma. Kode warna pada HTML menggunakan HTML triplets. Setiap dua digit kode melambangkan warna-warna red (merah), green (hijau), blue (biru) atau #RRGGBB. Pada kesempatan kali ini saya akan membahas tentang cara Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery

Langkah pertama untuk Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery adalah membuat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>

<html>

<head>

  <title>Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>

  <div class="container">

    <div class="row p-2">

      <div class="offset-3 col-6">

        <div class="card">

          <div class="card-header">

            Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery

          </div>

          <div class="card-body">

            <h5 class="card-title">Masukkan Kode Hex Warna</h5>

            <input placeholder="enter hex" maxlength="6" class="form-control"/>

            <br>

            <div id="bloop"></div>

            </br>

            <button class="btn btn-primary">Convert!</button>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

</html>

Jika sudah maka tahap selanjutnya teman-teman buat script jquery untuk melakukan convert warna hex ke dalam rgb seperti berikut ini.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

  function convert(hex) {

    hex = parseInput(hex);

    hex = hex.map(function (val) {return parseInt(val, 16);}).toString();

    if (hex.includes(NaN)) {

      return this.throwInvalid();

    }

    return "rgb(" + hex + ")";

  }

  function parseInput(hex) {

    hex = hex.trim().replace(/#/g, "");

    if (hex.length === 3) {

      hex = hex.

      split("").

      map(function (val) {return "" + val + val;}).

      join("");

    }

    // TODO: alpha logic if hex.length === 8

    return hex.match(/.{1,2}/g);

  }

  function throwInvalid() {

    return "Invalid hex!";

  }

  $("button").on("click", function () {

    var hex = $("input").val();

    var rgba = convert(hex);

    $("#bloop").html("<p>" + rgba + "</p>");

    $('body').css('background', rgba);

  });

</script>

Dan jika ditampilkan di halaman browser maka akan tampil seperti pada gambar berikut ini.

Demikian artikel tentang cara Membuat Convert Kode Warna Hex ke RGB Menggunakan Jquery. Smeoga dapat bermanfaat dan selamat mencoba.