Generate colors between #CCCCCC and #3B5998 for a color meter with JavaScript?

We have to write a function that generates a random color between two given colors. Let's tackle this problem in parts ?

• First ? We write a function that generates a random number between two given numbers.

• Second ? Instead of using the hex scale for random color generation, we will map the hex to 0 to 15 decimal scale and use that instead.

• Lastly ? We loop over any of the given color strings and generate a random color.

Creating Random Number Generator

First, we need a helper function to generate random numbers between two values:

const randomBetween = (a, b) => {
    const max = Math.max(a, b);
    const min = Math.min(a, b);
    return Math.floor(Math.random() * (max - min) + min);
};

// Test the helper function
console.log(randomBetween(5, 10)); // Random number between 5 and 10

8

Generating Random Colors Between Two Hex Colors

Now we'll create a function that generates a random hex color between two given hex colors by processing each hex digit individually:

const randomBetween = (a, b) => {
    const max = Math.max(a, b);
    const min = Math.min(a, b);
    return Math.floor(Math.random() * (max - min) + min);
};

const randomColor = (firstColor, secondColor) => {
    // Remove # and convert to uppercase
    const first = firstColor.toUpperCase().substring(1);
    const second = secondColor.toUpperCase().substring(1);
    
    const scale = '0123456789ABCDEF';
    let color = '#';
    
    // Process each hex digit position
    for(let i = 0; i < Math.min(first.length, second.length); i++) {
        const firstIndex = scale.indexOf(first[i]);
        const secondIndex = scale.indexOf(second[i]);
        const randomIndex = randomBetween(firstIndex, secondIndex);
        color += scale[randomIndex];
    }
    
    return color;
};

// Generate random colors between #CCCCCC and #3B5998
console.log(randomColor('#CCCCCC', '#3B5998'));
console.log(randomColor('#f43250', '#12342c'));
console.log(randomColor('#34324a', '#47942c'));
console.log(randomColor('#ffffff', '#000000'));

#9B58CA
#C23328
#36822B
#35102A

How It Works

The algorithm works by:

• Hex Mapping: Each hex digit (0-F) is mapped to decimal values 0-15 using the scale string.

• Position-wise Processing: For each position in the hex color, it finds the decimal values of both input colors.

• Random Selection: It generates a random decimal value between the two input values and converts it back to hex.

• Color Construction: The final color is built by concatenating all randomly generated hex digits.

Color Meter Implementation

Here's a practical example for creating a color meter between light gray (#CCCCCC) and Facebook blue (#3B5998):

const generateColorMeter = (startColor, endColor, steps) => {
    const colors = [];
    
    for(let i = 0; i < steps; i++) {
        const randomColor = (firstColor, secondColor) => {
            const first = firstColor.toUpperCase().substring(1);
            const second = secondColor.toUpperCase().substring(1);
            const scale = '0123456789ABCDEF';
            let color = '#';
            
            for(let j = 0; j < Math.min(first.length, second.length); j++) {
                const firstIndex = scale.indexOf(first[j]);
                const secondIndex = scale.indexOf(second[j]);
                const randomIndex = Math.floor(Math.random() * (Math.max(firstIndex, secondIndex) - Math.min(firstIndex, secondIndex)) + Math.min(firstIndex, secondIndex));
                color += scale[randomIndex];
            }
            return color;
        };
        
        colors.push(randomColor(startColor, endColor));
    }
    
    return colors;
};

// Generate 5 colors between #CCCCCC and #3B5998
const colorMeter = generateColorMeter('#CCCCCC', '#3B5998', 5);
console.log('Color meter colors:', colorMeter);

Color meter colors: [ '#9B58CA', '#7A4CB2', '#CB69A8', '#659BC4', '#8B72B5' ]

Key Points

• The function generates truly random colors within the specified range, not interpolated gradients.

• Each hex digit is processed independently, ensuring full coverage of the color space between the two inputs.

• The output varies each time due to the random nature of the algorithm.

Conclusion

This approach generates random colors between two hex values by processing each hex digit position independently. It's perfect for creating color meters with varied, unpredictable color distributions between specified bounds.