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 |
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"> </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"> </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.