@sammiles You will get better as you practice solving more problems/challenges. The one thing that helps me when I have a complex problem to solve is breaking it down into smaller pieces (problems) first and then solve each separately. If you do not break some problems down, you can easily get overwhelmed with where to start.

I actually broke this problem down (see my thought process for my first solution below), before actually writing any code.

**Piece #1**

I knew I first had to be able to separate each of the two colors down to the 3 components (red, green, blue) and I knew that I would need to iterate over both color’s red, green, and blue components, so I concluded the easiest way to do that was to create an array for each color containing the 3 components. At this point, I was not concerned about how I would create the array of components, but knew that is the data structure that I needed to help me solve the problem.

**Piece #2**

Assuming I would have to color variables with three 2-letter string elements in each, I now needed to figure out a formula which would help me calculate the arithmetic mean for each color component. Since I knew there were only two colors, I knew I could add a component from one color to the corresponding component of the other color and divide by 2 to get the mean.

**Piece #3**

Since these components were represented in hexadecimal, I decided to convert them to decimal first to make it easier for me to calculate the mean. Also, I decided I should store these mean values in an array of components, where I could iterate over them later to create a final hexcode string that the function would return.

Now that I had my basic outline of what I needed to do to solve this problem, I decided to start writing code for each piece (see below).

**Piece #1 Code**

There are several ways I could have created these arrays of components, but because I have worked with the match function before, I knew I could split it into two character groups using a regular expression ( the **/.{1,2}/g** part. Also, since I knew I would need to do this for each color, I created a function called splitHex that would return an array of these components. If I would have not known how to use the match function to create the array of colors, I could have used something like the code below to write the splitHex function.

```
const splitHEX = color => {
var componentsArr = [];
for (var i = 0; i < color.length; i += 2) {
componentsArr.push(color.slice(i, i+2));
}
return componentsArr;
};
```

**Piece #2 Code**

So to calculate the mean for each component using the two colors, I used the map function to iterate over the first color’s components and made use of the map function’s 2nd argument (element index) to reference the second color’s components. I decided to round the mean to the nearest integer to avoid fractions of hexadecimal numbers for colors. Also, because a hexcode for a component must be exactly 2 characters, I created a function which would add a ‘0’ to the beginning of any number less than 10.

**Piece #3 Code**

My formula in piece #2 (above) needed the components’ values to be in decimal, so I remembered that the parseInt function had that functionality built into it. Notice I created a function to reduce repeating the same code for each component which need to be converted.