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 the visual appeal.

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

Understanding Complementary Colors

The following is the knowledge through which we understand complementary colors ?

• Complementary Colors: Pairs of colors that cancel each other out, creating a neutral color (black or white).
  
• 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: 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 are required to write a JavaScript function that takes in hex color as the only input. Our function should then find the complementary color for the color taken in as input.

Here are some input and output pairs ?

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

Finding the Complementary Color 

Following are the steps to find the complementary color for the color taken ?

• Extract Hex Color: Remove the # symbol using the slice() method.
• Convert Hex to Decimal: Convert the hex string to a decimal integer with the parseInt() method.
  
• Calculate the Complement: Subtract the decimal value from FFFFFF (16777215) using a bitwise operation.
  
• Format the Result: Convert the complement back to hex, adding leading zeros if needed.
  
• Return Complementary Color: Return the complementary color prefixed with #.

const colorPart = color.slice(1);

const ind = parseInt(colorPart, 16);

JavaScript Code to Find Complementary Color

Below is an example to find the complementary color for the color taken ?

const str1 = '#142814';
const str2 = '#ffffff';
const str3 = '#3399ff';
const getComplementaryColor = (color = '') => {
   const colorPart = color.slice(1);
   const ind = parseInt(colorPart, 16);
   let iter = ((1 << 4 * colorPart.length) - 1 - ind).toString(16);
   while (iter.length < colorPart.length) {
      iter = '0' + iter;
   };
   return '#' + iter;
};
console.log(getComplementaryColor(str1));
console.log(getComplementaryColor(str2));
console.log(getComplementaryColor(str3));

Output

#ebd7eb
#000000
#cc6600

Conclusion

Using basic string manipulations, simple number conversions, and bitwise operations, we can find the opposite color to be countered with any user's given hex code. This function can be used in all different web development projects from creating contrasting color schemes to improving design aesthetics, and better user interfaces.