32,000+ SUBSCRIBERS CAN'T GO WRONG !!!

phpans
GET TOP ARTICLES, SNIPPETS, SCRIPTS IN YOUR INBOX FOR FREE!

Delivered by GET EMAIL UPDATES FeedBurner
We always respect your privacy and take protecting it seriously.
We won't Spam You

Create hex to rgba converter tool

, 0,
Create hex to rgba converter tool

Today I am going to show you how to create a hex to RGBA converter using javascript. This is very easy to make this tools using jquery.
First create a file name as hex2rgba.php and write down this code into this page.
hex2rgba.php

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>hex to rgba converter</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="//phpans.com/styles/styles.css" media="all,print"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="hex.min.js"></script>
<meta http-equiv="X-Frame-Options" content="deny"/>
<style>
#result
{
font-size: 20px;
font-weight:bold;
}
</style>
</head>
<body align="center">
<h1>hex to rgba converter</h1>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="hexcolor">Hex Color</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="text" class="form-control" id="hexcolor" value="FFFFFF">
</div>
<div class="input-group">
<div class="input-group-addon">Opacity</div>
<input type="number" class="form-control" id="opacity" value="70">
</div>
</div>
<button type="submit" id="convert" class="btn btn-primary">Convert</button>
</form>
<div id="result"></div>
</body>
</html>


After creating this script now we have to create jquery function for this script. Already we linked js file into this script hex.min.js. Now write down some code for hex.min.js file. Create a hex.min.js file and write down this code into this file.
hex.min.js
$(document).ready(function() {

$('#convert').click(function()
{
function hex2rgba_convert(hex,opacity){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);

result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
var color = $('#hexcolor').val();
var opacity = $('#opacity').val();
$('#result').html(hex2rgba_convert(color,opacity));
return false;
});
});

After creating both file put hex2rga.php and hex.min.js file in same directory, then run this script into your server and open this tools into browser. Look it's ready for use.
Let's this tools

Download PDF
Is this article helpful for you?





captcha

  • Connect
  •       
Top
Create an free account and start learning & sharing! Sign Up