JavaScript - Complementary Colors Builder

In this article, we will learn to build a JavaScript function that calculates the complementary color for a given hex color code. In web development, working with colors and their relationships is an essential aspect of design and user interface. One of the concepts that designers often use is complementary colors?colors that are opposite each other on the color wheel, providing contrast and enhancing visual appeal.

You can try our Online Color Picker Tool to create new colors.

Understanding Complementary Colors

The following concepts help us understand complementary colors:

• Complementary Colors: Pairs of colors that are opposite on the color wheel, creating maximum contrast when used together.
• Examples:
  • Blue is complementary to orange
  • Red is complementary to green
• Hex Color Codes: Represented as #RRGGBB, where RR, GG, and BB are the red, green, and blue components
• Hex Components: Each component ranges from 00 (0 in decimal) to FF (255 in decimal)
• Complementary Color Calculation: Subtract each RGB component from FF (255 in decimal)

Problem Statement

We need to write a JavaScript function that takes a hex color as input and returns its complementary color. The function should handle standard 6-character hex codes.

Here are some example input and output pairs:

getComplementaryColor('#142814') ? '#ebd7eb'
getComplementaryColor('#ffffff') ? '#000000'
getComplementaryColor('#3399ff') ? '#cc6600'

How It Works

The algorithm follows these steps to find the complementary color:

• Extract Hex Color: Remove the # symbol using the slice() method
• Convert Hex to Decimal: Convert the hex string to a decimal integer using parseInt() method
• Calculate the Complement: Use bitwise operation to subtract from the maximum value (0xFFFFFF)
• Format the Result: Convert back to hex and pad with zeros if needed
• Return Result: Return the complementary color with # prefix

Implementation

Here's the complete JavaScript function to find complementary colors:

function getComplementaryColor(color) {
    // Remove the # symbol
    const colorPart = color.slice(1);
    
    // Convert hex to decimal
    const decimal = parseInt(colorPart, 16);
    
    // Calculate complement using bitwise operation
    // (1 << 4 * colorPart.length) creates the maximum value for the bit length
    let complement = ((1 << 4 * colorPart.length) - 1 - decimal).toString(16);
    
    // Pad with zeros if necessary
    while (complement.length < colorPart.length) {
        complement = '0' + complement;
    }
    
    return '#' + complement;
}

// Test the function with different colors
console.log(getComplementaryColor('#142814'));  // Dark green
console.log(getComplementaryColor('#ffffff'));  // White
console.log(getComplementaryColor('#3399ff'));  // Light blue
console.log(getComplementaryColor('#ff0000'));  // Pure red

#ebd7eb
#000000
#cc6600
#00ffff

Visual Example

Here's a practical example showing how to apply complementary colors in a web interface:

function createColorDemo(originalColor) {
    const complementary = getComplementaryColor(originalColor);
    
    // Create elements to show the color relationship
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.margin = '10px 0';
    
    const original = document.createElement('div');
    original.style.backgroundColor = originalColor;
    original.style.color = complementary;
    original.style.padding = '20px';
    original.style.width = '150px';
    original.textContent = `Original: ${originalColor}`;
    
    const complement = document.createElement('div');
    complement.style.backgroundColor = complementary;
    complement.style.color = originalColor;
    complement.style.padding = '20px';
    complement.style.width = '150px';
    complement.textContent = `Complement: ${complementary}`;
    
    container.appendChild(original);
    container.appendChild(complement);
    document.body.appendChild(container);
}

function getComplementaryColor(color) {
    const colorPart = color.slice(1);
    const decimal = parseInt(colorPart, 16);
    let complement = ((1 << 4 * colorPart.length) - 1 - decimal).toString(16);
    
    while (complement.length < colorPart.length) {
        complement = '0' + complement;
    }
    
    return '#' + complement;
}

// Demonstrate with different colors
createColorDemo('#3366cc');
createColorDemo('#ff6600');
createColorDemo('#009900');

Key Points

• The bitwise operation (1 << 4 * length) - 1 creates the maximum value for the given hex length
• For 6-character hex codes, this equals 0xFFFFFF (16,777,215 in decimal)
• Subtracting each component from FF effectively inverts the color
• Leading zeros must be preserved to maintain proper hex format

Conclusion

This complementary color function uses string manipulation, number conversion, and bitwise operations to calculate color opposites. It's useful for creating high-contrast color schemes and improving visual design in web applications.