Reading Time: 4 minutes

1,505 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.

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.