# Converting a color from a three-digit hexcolor to a six-digit hexcolor with vanilla JS

On Tuesday, we looked at how to check the contrast of a background color and determine if its text color should be white or black.

In it, I threw in this little snippet on converting three-digit hexcolors into six-digit ones:

``````// If a three-character hexcolor, make six-character
if (hexcolor.length === 3) {
hexcolor = hexcolor.split('').map(function (hex) {
return hex + hex;
}).join('');
}
``````

Reader Laura Montgomery emailed me to ask what this code is actually doing, so that’s what we’ll be looking at today.

## How hexcolors work

Hexcolors are typically six-digit strings representing color values (often with a leading hash, or `#`).

They’re a numerical form of RGB (Red/Green/Blue), with the first two digital representing `R`, digits three and four representing `G`, and digits five and six representing `B`.

``````var hexcolor = '#RRGGBB';
``````

For values where the `R`, `G`, and `B` couplets have the same value, the hexcolor can be shortened to just three digits.

For example, `#FFFFFF` is white. You can also write it as `#FFF`. The color blue I use on my site is `#0088cc`. Since the `R`, `G`, and `B` all contain repeating values, I can also write it as `#08c`.

## How to convert a three-digit hexcolor into a six-digit one

Let’s look at this code again.

``````// If a three-character hexcolor, make six-character
if (hexcolor.length === 3) {
hexcolor = hexcolor.split('').map(function (hex) {
return hex + hex;
}).join('');
}
``````

For our purposes, let’s assume the value of `hexcolor` is `08c`.

First, we use the `length` property to figure out how many characters are in the string. If it’s `3`, we need to convert it. If not, we can move on.

``````if (hexcolor.length === 3) {
// Do something...
}
``````

The `String.split()` method takes a string and breaks it up into an array based on a delimiter (a character or set of characters). If you pass in an empty string (`''`), it will create a new array item for each character in the string.

``````// if the hexcolor was 08c
// this would return ['0', '8', 'c']
hexcolor.split('');
``````

The `Array.map()` method takes an array, transforms each item in it, and returns a new array.

We can use it to take our array of hexcolor values and create a new array where each item is “doubled up,” or shows up twice. In this example, `hex` represents each individual hex character from the array.

``````// With our ['0', '8', 'c'] array
// This would create this new array: ['00', '88', 'cc']
hexcolor.split('').map(function (hex) {
return hex + hex;
});
``````

Finally, the `Array.join()` method takes an array of items and combines them all into a single string. By default, it separates them with a comma, but you can pass in a delimiter to use instead. We’ll pass in an empty string so that there’s no separation at all.

``````// Called on our ['00', '88', 'cc'] array
// This would return '0088cc'
hexcolor.split('').map(function (hex) {
return hex + hex;
}).join('');
``````

Hope that helps clear things!

Here’s a demo you can play with.