creocodigo
Hex to RGB Convertor using JavaScript

Hex to RGB Convertor using JavaScript

Shikhar Baniya's photo
Shikhar Baniya
·

3 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to create a HEX to RGB convertor using JavaScript. You can find many online services available but to create your own gives you another happiness. In this mini-project, we're using JavaScript Logic to accept the input given by user which will be a hex value and then convert it into it's respective RGB value. This is a fun project and you are going to learn a lot by creating this.

Here's a preview -

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HEX to RGB HSL Converter | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">

</head>
<body>
<input type="text" placeholder="hex" id="hex" autocomplete="off">
<input type="text" placeholder="rgb" id="rgb" autocomplete="off">

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

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

body {
    margin: 5% auto;
    background: #f6f7fc;
    margin-top: 15%;
}
::placeholder{
    color: #222;
    opacity: 0.2;
}
input {
    font-size: 44px;
    padding: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 500;
    border-radius: 50px;
    text-align: center;
    border: 4px solid rgba(0, 0, 0, .15);
    display: block;
    margin: 50px auto;
    width: 40%;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
input:focus {
    outline: 0;
    border: 4px solid rgba(0, 0, 0, .3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

Step - 4: Below is the JavaScript code which is the most important part in this Converter. Go through the code and I'm sure you will understand everything of how things are flowing.

JS


$(window).load(function () {
  /* For quick copy-paste */
  $("input").focus(function () {
    this.select();
  });

  /* Change color on every key input. */
  $("#hex").bind("blur keydown", function (event) {
    var el = this;
    setTimeout(function () {
      var rgb = [],
        $input = $(el),
        fail = false,
        original = $input.val(),
        hex = (original + "").replace(/#/, "");

      if (original.length === 1 && original !== "#") {
        $input.val("#" + original);
      }
      if (hex.length == 3) hex = hex + hex;

      for (var i = 0; i < 6; i += 2) {
        rgb.push(parseInt(hex.substr(i, 2), 16));
        fail = fail || rgb[rgb.length - 1].toString() === "NaN";
      }

      $("#rgb").val(fail ? "" : "rgb(" + rgb.join(",") + ")");

      $("body").css("backgroundColor", $("#rgb").val());
    }, 13);
  });
});

$(document).ready(function () {
  if (!("placeholder" in document.createElement("input"))) {
    $("input[placeholder], textarea[placeholder]").each(function () {
      var val = $(this).attr("placeholder");
      if (this.value == "") {
        this.value = val;
      }
      $(this)
        .focus(function () {
          if (this.value == val) {
            this.value = "";
          }
        })
        .blur(function () {
          if ($.trim(this.value) == "") {
            this.value = val;
          }
        });
    });

    // Clear default placeholder values on form submit
    $("form").submit(function () {
      $(this)
        .find("input[placeholder], textarea[placeholder]")
        .each(function () {
          if (this.value == $(this).attr("placeholder")) {
            this.value = "";
          }
        });
    });
  }
});

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

HTML5CSSJavaScriptWeb Developmentwebdev