Reading Time: 4 minutes

1,346 Views

Inside this article we will see the concept i.e Javascript convert hexadecimal color code into RGA format. Inside CSS we have these formats of color codes –

Format: Hexadecimal format (HEX) – Example: #241eb5
Format: RGBA format – Example: rgba(3 169 244, 0.79) OR Format: RGB format – Example: rgb(3 169 244)
Format: HSL format – Example: hsl(199deg 98% 48%) OR HSLA format

Above are the list of color codes format of CSS which we use inside application.

In this article we will see how to convert a Hex value into RGA format or RGBA format using javascript. Hexadecimal value looks like #241eb5 whereas RGB format rgb(3 169 244)

Learn More –

Let’s get started.

Create Simple Application

Here, we will create an application in HTML and using javascript we convert a hexadecimal value to RGB format.

Create a file hex-rgb.html in your localhost directory.

Open file and write this following code into it.

<script>

function generateRGB(color) {

    var r = parseInt(color.substr(1, 2), 16);
    var g = parseInt(color.substr(3, 2), 16);
    var b = parseInt(color.substr(5, 2), 16);

    return "rgb(" + r + ", " + g + ", " + b + ")"; // RGB format

    //return "rgba(" + r + ", " + g + ", " + b + ", 0.79)"; // RGBA format
}

console.log(generateRGB("#f29c13"));

</script>

Concept

Here, is the code to convert hex code to rgb code format.

function generateRGB(color) {

    var r = parseInt(color.substr(1, 2), 16);
    var g = parseInt(color.substr(3, 2), 16);
    var b = parseInt(color.substr(5, 2), 16);

    return "rgb(" + r + ", " + g + ", " + b + ")"; // RGB format

    //return "rgba(" + r + ", " + g + ", " + b + ", 0.79)"; // RGBA format
}

RGB color code is the combination of 3 values, but RGBA is of 4 values.

Application Testing

Open project into browser.

URL: http://127.0.0.1/js/hex-rgb.html

You can see output inside your browser console.

Output

rgb(242, 156, 19)

We hope this article helped you to learn JavaScript Convert Hexadecimal Color Code into RGB Format in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.