How to Convert between RGB and Hex in JavaScript
Colors can be represented in different formats depending on the context.
For example, on the web in CSS, you can represent colors using RGB, HSL, HEX, and HSB.
Unfortunately, there is no built-in way to convert between these in JavaScript, so we will need to write our own code.
In this post, we will learn how to convert from RGB to Hex, the most popular format for colors.
How to convert from RGB to Hex
The biggest difference between these two values is that the RGB value is a 3-tuple of numbers between 0 and 255, and the Hex value is a 6-digit string.
Let's first start with the RGB value.
JAVASCRIPTconst red = 255;
const green = 0;
const blue = 0;
Now let's define a function that takes a single color and converts it to its hex representation.
For this, we will make use of the toString(16)
method, which converts a number to a hexadecimal string.
If the value is only one digit, it will be padded with a 0.
JAVASCRIPTconst colorToHex = (color) => {
const hexadecimal = color.toString(16);
return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}
Now we can define a separate function that calls this function with our 3 values to get the final hex string:
JAVASCRIPTconst red = 255;
const green = 0;
const blue = 0;
const colorToHex = (color) => {
const hexadecimal = color.toString(16);
return hexadecimal.length == 1 ? "0" + hexadecimal : hexadecimal;
}
const RGBtoHex = (red, green, blue) => {
return "#" + colorToHex(red) + colorToHex(green) + colorToHex(blue);
}
console.log(RGBtoHex(red, green, blue));
BASH#ff0000
How to convert from Hex to RGB
In the reverse direction, we can convert from Hex to RGB. Rather than use the toString(16)
method, we can use the parseInt
method.
Let's start with the hex we want to convert:
JAVASCRIPTconst hex = "#12ee42";
Now let's use the parseInt
method and pull out 2-character pieces of this string to get a numerical value from this:
JAVASCRIPTconst hex = "#12ee42";
const red = parseInt(hex.substring(1, 3), 16);
const green = parseInt(hex.substring(3, 5), 16);
const blue = parseInt(hex.substring(5, 7), 16);
console.log(red, green, blue);
BASH18 238 66
You can alternatively make a reusable function from this as well:
JAVASCRIPTconst hex = "#12ee42";
const hexToRGB = (hex) => {
const red = parseInt(hex.substring(1, 3), 16);
const green = parseInt(hex.substring(3, 5), 16);
const blue = parseInt(hex.substring(5, 7), 16);
return [red, green, blue];
}
console.log(hexToRGB(hex));
BASH(3) [18, 238, 66]
Conclusion
In this post, we learned how you can convert from RGB to Hex and vice versa.
This is especially useful when you are working with web technologies, specifically front-end development.
Hopefully, this has been useful to you. Thanks for reading!
- Getting Started with TypeScript
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- How to build a Discord bot using TypeScript
- How to deploy a Deno app using Docker
- Getting Started with Deno
- How to deploy an Express app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Learn how to build a Slack Bot using Node.js
- Using Push.js to Display Web Browser Notifications
- Getting Started with React