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.

 

8 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat