Building a HEX color code to RGB converter using JavaScript

In this guide, we will build a simple web-based HEX to RGB converter using JavaScript. This article will help you build your own HEX color code to RGB converter as an interactive web application.

Setting Up the Project Structure

First, create a new directory for your project, and inside this directory, create three files:

index.html (for the HTML structure)
styles.css (for the CSS styles)
script.js (for the JavaScript functionality)

Your project structure should look like this:

hex-to-rgb-converter/
├── index.html
├── styles.css
└── script.js

Writing the HTML

Open index.html and add the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HEX to RGB Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>HEX to RGB Converter</h1>
        <input type="text" id="hexInput" placeholder="Enter HEX colour code">
        <button id="convertBtn">Convert</button>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

In this HTML:

We set up a basic HTML structure with a header, an input field for the HEX color code, a button to trigger the conversion, and a div to display the result.
We link the CSS file in the head section.
We link the JavaScript file just before the closing body tag to load the JavaScript after the markup.

Styling the Page with CSS

Open styles.css and add the following CSS code:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    width: 200px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

#result {
    margin-top: 20px;
    font-size: 18px;
}

In this CSS:

We style the body to use a flexbox layout, center the content, set the background color, and apply a default font.
We style the container div to look like a card with padding, background color, rounded corners, and a box shadow.
With the provided CSS code, your styling should look like the picture given below.

Adding Functionality with JavaScript

Open script.jsand add the following JavaScript code:

function hexToRgb(hex) {
    hex = hex.replace(/^#/, '');

    let bigint = parseInt(hex, 16);
    let r = (bigint >> 16) & 255;
    let g = (bigint >> 8) & 255;
    let b = bigint & 255;

    return { r: r, g: g, b: b };
}

document.getElementById('convertBtn').addEventListener('click', function() {
    let hexInput = document.getElementById('hexInput').value;
    let rgbColor = hexToRgb(hexInput);
    if (rgbColor) {
        document.getElementById('result').textContent = `RGB(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b})`;
    } else {
        document.getElementById('result').textContent = 'Invalid HEX code';
    }
});

In this JavaScript:

We define a hexToRgb function that converts a HEX color code to an RGB object.
- It removes the # if present.
- It parses the HEX string to a base 16 integer.
- It extracts the red, green, and blue components using bitwise operations.
- It returns an object containing the RGB values.
We add an event listener to the button with the ID convertBtn:
- When the button is clicked, it retrieves the value from the input field.
- It converts the HEX input to an RGB object using the hexToRgb function.
- It displays the RGB result in the result div. If the input is invalid, it shows an error message.

Finishing up

With all the steps completed, you should be able to run your project by clicking on the index.html file and can enter your own HEX code to convert it into its respectiveRGB value.

Learn more

What’s the Difference Between RGB, HEX, CMYK, and PMS Color Values?
How to Create a Digital Clock Using JavaScript
Design a Simple Counter App using HTML CSS and JavaScript