Why Our Eyes Need Complementary Color Palette Schemes… And Where You Can Make Them

Did you know that there’s actually biological science behind how two or more colors complement one another? I’m not an ophthalmologist or an optometrist, but I’ll try to translate the science here for simple folks like myself. Let’s start with color in general.

Colors Are Frequencies

An apple is red… right? Well, not really. The frequency of how light is reflected and refracted off of the surface of an apple makes it detectable, converted by our eyes as signals, and sent to our brain where we identify it as “red”. Ugh… that hurts my head just thinking about it. It’s true though… the color is simply a frequency of light. Here’s a view of the electromagnetic spectrum and each color’s frequencies:

This is exactly why white light pointed at a prism produces a rainbow. What’s really occurring is that the crystal is changing the frequency of the wavelength as the light is refracted:

Your Eyes Are Frequency Detectors

Your eye is simply a frequency detector for the range of color frequencies in the electromagnetic spectrum. Your ability to detect colors happens through different types of cones in the wall of your eye that are then connected to your optic nerves. The cones detect each frequency range, then translate it into a signal to your optic nerve, sent to your brain, where it’s identified.

Did you ever notice that you can stare a long time at something of really high contrast, look away, and continue to see an afterimage that doesn’t match the original colors you were looking at? Let’s say it’s a blue square on a white wall:

After a while, the cells in your eye that process blue light will become fatigued, making the signal they send to your brain slightly weaker. Since that part of the visual spectrum is slightly suppressed, when you look at a white wall after staring at the blue square, you’ll see a faint orange afterimage. What you’re seeing is the white spectrum of light from the wall, minus a tiny bit of blue, which your brain processes as orange.

Color Theory 101: Making Complementary Colors Work for You

If that fatigue didn’t happen, our eyes and brains don’t have to work as hard to interpret the multiple wavelengths (eg. colors) that they’re seeing.

Visual Noise Versus Harmony

Let’s use an analogy between sound and color. If you listened to different frequencies and volumes that weren’t complementary to one another, you’d think of it as noise. This isn’t unlike color, where brightness, contrast, and detected colors can be visually noisy or complementary. Within any visual medium, we want to work toward harmony.

It’s why you don’t see an extra in the background of a movie wearing a bright red shirt. And it’s why interior decorators work hard to find complementary colors across the walls, furniture, art, and other features of the room they’re designing. Color is critical in creating the mood visitors experience when they walk in, based on how easily their brains interpret the colors.

1 palette is like assembling a band in beautiful harmony. And just as the voices and instruments assembled closely align in volume and frequency… so do the complementary colors of your color palette. Color palette design is truly an art form for the professionals who have finely tuned their color detection, but it’s absolutely a computational science as well because the complementary frequencies can be computed.

More on harmonies soon… let’s get back to color theory.

RGB Colors

Pixels within the digital spectrum are combinations of red, green, and blue. Red = 0, green = 0, and blue = 0 1 as black. Everything in between is a different color composed of the three. The very basics of computing a complementary color are pretty simple: subtract each RGB value from 255 to get the new RGB Value. Here’s an example:

The difference in light frequency between orange and blue is far enough apart that it’s contrasting, but not so great that it’s difficult for our eyes to interpret. The color frequencies are complementary and pleasing to our receptors!

Computing one color is easy… computing 3 or more complementary colors requires you to calculate equivalent quantities for each option. That’s why color palette scheme generators come in so handy! With very little computation, these tools can provide you with several colors that complement one another.

The Color Wheel

Understanding the relationship between colors is best visualized using a color wheel. The colors are arranged in a circle based on their relative frequency. The radial distance is the saturation of the color, and the azimuthal position on the circle is the hue of the color.

Fun fact: Sir Isaac Newton first developed the Color Wheel in 1665, a basis for his experiments with prisms. His experiments led to the theory that red, yellow and blue were the primary colors from which all other colors are derived. Side note… he even applied musical “notes” to each color.

Arm me with Harmony…

Types of Color Harmonies

1 Here’s a great overview video:

Different characteristics are associated with each type:

• Analogous – groups of colors that are next to each other on the color wheel. 
• Monochromatic – groups derived from a single base hue and extended using its shades, tones, and tints.
• Triad – groups of colors that are evenly spaced around the color wheel
• Complementary – groups of colors that are opposite each other on the color wheel.
• Split Complementary – a variation of complementary where that uses two colors adjacent to the complement.
• Rectangle (Tetradic) – uses four colors arranged into two complementary pairs
• Square – similar to the rectangle, but with all four colors spaced evenly around the color circle
• Compound – color and the two colors adjacent to its complementary color
• Shades – adjustment of the tint (increase in lightness), or shade (darkness) for the primary color.

These aren’t subjective themes; they’re actual mathematical calculations with nice names applied that help us better understand the calculations.

Color Palette Scheme Generators

Using a color palette scheme generator, you can get beautiful, complementary color combinations like this one:

I often use color palette scheme generators when I’m working on client sites. Because I’m not an expert on colors, these tools help me select better options for backgrounds, borders, footer backgrounds, and primary and secondary button colors. The result is a website that’s far more pleasing to the eye! It’s a subtle, compelling strategy to apply to your design of anything – from an advertisement to an entire website.

Here are some great color palette scheme generators online:

• Adobe – a fantastic tool with up to 5 colors where you can test different types, make adjustments, and even save your theme in any Adobe product.
• BrandColors – the biggest collection of official brand color codes around.
• Canva – upload a photo, and they’ll use it as a foundation for your palette!
• Color Designer – Just pick a color or use the preselected colors and the app does the rest. 
• Color Hunt – free and open platform for color inspiration with thousands of trendy hand-picked color palettes
• Colorspace – just enter one to three colors and generate some schemes!
• Colourcode – a really cool screen-wide experience for creating your color palette with a number of harmony styles on the left.
• COLOURlovers – a creative community where people from around the world create and share colors, palettes, and patterns, discuss the latest trends, and explore colorful articles.
• Coolers – create the perfect palette or get inspired by thousands of beautiful color schemes.
• Data Color Picker – Use the palette chooser to create a series of colors that are visually equidistant. 
• Khroma – uses AI to learn which colors you like and creates palettes for you to discover, search, and save.
• Material Design – create, share, and apply color schemes for your UI. It even comes with an export for your app!
• Muzli Colors – add a color name or code, and produce a beautiful palette.
• Paletton – choose a basic color and be inspired.

Color and Accessibility

Please keep in mind, as you’re designing your next palette scheme, that a significant number of people with visual impairments and color deficiencies need to interact with your experiences.

• Contrast – Each independent color has a luminance. Colors of overlays and adjacent objects must have a relative luminance ratio of 4.5:1 for people with visual impairments to be able to distinguish them. I wouldn’t go through the trouble of calculating the ratios yourself; you can test your color ratios with Contrast Ratio or Colorsafe.
• Iconography – Highlighting a field in red doesn’t help someone with color deficiency. Be sure to apply some message or icon to let them know there’s an issue as well.
• Focus: Many people navigate with keyboards or screen readers. Be sure your user interface is designed correctly, with all accessibility tags, so they can take full advantage of your site. For people with visual impairments, the use of white space and the ability to increase or decrease font sizes without destroying the layout are critical.