HEX - RGB Color Converter In jQuery

File Size: 4.08 KB
Views Total: 874
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
HEX - RGB Color Converter In jQuery

A simple and fast color converter that provides 2 helper functions to convert HEX values to RGB and vice versa. Built with Bootstrap, jQuery, and JavaScript.

How to use it:

1. Load the necessary Stylesheet for the styling of the color converter.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/main.css" />

2. Create a select box from which you can select the type of conversion (HEX To RGB or RGB To HEX).

<div class="row h-50" id="choose-conversion">
  <div class="form-group col-md-6 mx-auto text-center align-self-center">
    <h3 class="text-center"><label for="conversion">Select Conversion</label></h3>
    <select class="form-control mx-auto my-4" id="conversion-selector">
        <option value="selected" selected>Choose your conversion</option>
        <option value="rgb-to-hex">RGB to HEX</option>
        <option value="hex-to-rgb">HEX to RGB</option>
    </select>
    <button type="button" id="conversion-chosen" class="btn btn-primary mx-auto my-2">Select</button>
  </div>
</div>

3. Create a button to reset the color converter.

<button type="button" id="reload-btn" class="btn btn-primary">Reset</button>

4. Create the HTML for the RGB to HEX converter.

<div class="row h-50" id="rgb-to-hex-input" >
  <div class="form-group col-md-6 text-center mx-auto py-3 align-self-center input-area">
    <h4 class="text-center"><label for="rgb-value">Enter RGB Value</label></h4>
    <div class=" my-4 mx-auto">
        <input type="number" id="red-input" class="form-control my-3 mx-auto rgb-input-field text-center" placeholder="Red Value" value="">
        <input type="number" id="green-input" class="form-control my-3 mx-auto rgb-input-field text-center" placeholder="Green Value" value="">
        <input type="number" id="blue-input" class="form-control my-3 mx-auto rgb-input-field text-center" placeholder="Blue Value" value="">
    </div>
    <button type="button" id="convert-hex-btn" class="btn btn-primary mx-auto">Convert</button>
    <h4 class="text-center my-4">Hex Value</h4>
    <h4 id="hex-value-result" class="text-center my-3">&nbsp;</h4>
  </div>
</div>

5. Create the HTML for the HEX TO RGB converter.

<div class="row h-50" id="rgb-to-hex-input" >
  <div class="form-group col-md-6 text-center mx-auto py-3 align-self-center input-area">
    <h4 class="text-center"><label for="rgb-value">Enter RGB Value</label></h4>
    <div class=" my-4 mx-auto">
      <input type="number" id="red-input" class="form-control my-3 mx-auto rgb-input-field text-center" placeholder="Red Value" value="">
      <input type="number" id="green-input" class="form-control my-3 mx-auto rgb-input-field text-center" placeholder="Green Value" value="">
      <input type="number" id="blue-input" class="form-control my-3 mx-auto rgb-input-field text-center" placeholder="Blue Value" value="">
    </div>
    <button type="button" id="convert-hex-btn" class="btn btn-primary mx-auto">Convert</button>
    <h4 class="text-center my-4">Hex Value</h4>
    <h4 id="hex-value-result" class="text-center my-3">&nbsp;</h4>
  </div>
</div>

5. Load the color converter's JavaScript after jQuery and done.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/main.js"></script>

This awesome jQuery plugin is developed by CaseyPitman. For more Advanced Usages, please check the demo page or visit the official website.