How we can create a Color converter program using HTML CSS JS or any JS library? Solution: See this Hex to RGB and HSL Converter Program, Covert Color Values Format.
Previously I have shared an RGB slider program that provides selected color’s hex value, but this is a hex to RGB and HSL converter. Basically, color has 5 different formats HEX, RGB, HSL, HSV, and CMYK. There different types of values have different works, like on web design we mostly use Hex format, and on-screen graphic we use RGB format, and on printable things, we use CMYK format. There are many graphic softwares and online tools for converting values easily. Also, we can create a program using JavaScript to do this work.
Today you will learn to create a program for Covert Color Values Format. Basically, there are 3 input fields for 3 types of formats Hex, RGB, HSL. When you will put a Hex value to the hex input then the program will covert values to other formats automatically. You just have to put values and other formats will visible automatically on keyup event, you don’t have to press any button for converting values.
So, Today I am sharing Hex to RGB and HSL Converter Program. There I have used HTML CSS to create and style the layout and jQuery for functioning. We also can user pure JS to create the program, but it will a complicated and long bunch of codes. You can use this program for converting color formats, also you can create a dedicated website for convert hex to RGB and HSL values online.
If you are thinking now how this converter program actually is, then see the preview given below.
Preview Of Covert Color Values Format
See this video preview to getting an idea of how this program looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Hex to RGB and HSL Converter Program Source Code
Before sharing source code, let’s talk about it. In the HTML file, I have created only 3 text inputs with a placeholder text and an ID name. 3 inputs had different ID names and placeholder texts. There are only these things, because it is a short program. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.
Now using CSS I have placed all 3 input in the middle, as you can see in the preview. With CSS I gave basics values like size, position, margin, padding, etc to the inputs and body. There I have used CSS border-radius command for rounded-corner boxes. Also, there is a box-shadow effect on focus, I have used input: <span><a href="https://webdevtrick.com/tag/focus" target="_blank" rel="noopener noreferrer">focus</a> command for this.
jQuery handling here the whole convert function in the program. There I have used if{} else{} statements to declare the conditions and for loop for{} to create the other values. Also, I have used many other commands which you can see in the code. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First file for HTML, second for CSS, third for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <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"> <input type="text" placeholder="rgb" id="rgb"> <input type="text" placeholder="hsl" id="hsl"> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { margin: 5% auto; background: #fff; } input { font-size: 44px; padding: 20px; font-family: courier; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 4px solid rgba(0,0,0,.15); display: block; margin: 50px auto; width: 80%; background: rgba(255,255,255,0.9); overflow: hidden; text-overflow: ellipsis; } input:focus { outline: 0; border: 4px solid rgba(0,0,0,.3); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3); } |
function.js
The final step, Now create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(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(',') + ')'); $('#hsl').val(fail ? '' : 'hsl(' + rgbToHsl.apply(null, rgb).join(',') + ')'); $('body').css('backgroundColor', $('#rgb').val()); }, 13); }); /* Function to convert rgb-to-hsl. */ function rgbToHsl(r, g, b){ r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [(h*100+0.5)|0, ((s*100+0.5)|0) + '%', ((l*100+0.5)|0) + '%']; } }); $(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 = ""; } }); }); } }); |
That’s It. Now you have successfully created Hex to RGB and HSL Converter Program, Convert Color Values Format. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
