Did you know that there’s actually biological science behind how two or more colors complement one another? I’m not an ophthalmologist nor 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, sent to our brain where we identify it as “red”. Ugh… that hurts my head just thinking about it. It’s true though… color is simply a frequency of light. Here’s a view of the electromagnetic spectrum and each colors’ 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 truly just a frequency detector for the range of color frequencies on 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. Each frequency range is detected by some of these cones, then translated 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.
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 do an analogy of sound versus 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 the brightness, contrast, and color detected can either be visually noisy or complementary. Within any visual medium, we want to work towards 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 that the visitor gets when they walk into it based on how easy it is for their brain to interpret the colors.
Your color palette is the equivalent of 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 complimentary 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 is displayed as white and red = 255, green = 255, and blue = 255 is seen as black. Everything in between is a different color composed of the three. The very basics of computing a complementary color are pretty simple… just subtract the RGB values from 255 for the new RGB Value. Here’s an example:
The difference in this light frequency between the orange and blue is far enough apart that it’s contrasting, but not so far 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 between each of the options. That’s why color palette scheme generators come in so handy! With very few computations needed, 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 not their relative frequency. The radial distance is the saturation of the color and the azimuthal position on the circle as 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
The relationships between and how each set of complimentary colors are computed are known as harmonies. 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 mathematic 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 to better select things like backgrounds, borders, footer backgrounds, primary and secondary button colors. The result is a website that’s far more pleasing to the eye! It’s a subtle, incredibly powerful 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 to5 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!
- Colllor – generate a consistent web color palette with just a few clicks.
- 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
- Colorkuler – generate a color palette for Instagram to make it more aesthetically pleasing.
- Colormind – a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.
- 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.
- Veranda – get inspired by tons of amazing color palettes.
Color and Accessibility
Please keep in mind as you’re deciding to design your next palette scheme that there is a significant amount of people with visual impairments and color deficiencies that 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 in order for people with visual impairments to be able to distinguish them. I wouldn’t go through the trouble of trying to calculate the ratios yourself, you can test your ratios of two colors with Colorable, Contrast Ratio, or Colorsafe.
- Iconography – Highlighting a field in red doesn’t assist someone who has a color deficiency. Be sure to apply some kind of message or icon to let them know there’s an issue as well.
- Focus – Many people navigate with keyboards or screenreaders. Be sure that your user interface is properly designed with all accessibility tagging for them to take advantage of your site. For people with visual impairments, use of white space and the ability to increase or decrease font-sizes where it doesn’t destroy the layout is critical.
Are you an eye expert? Color expert? Accessibility expert? Please feel free to provide me with any guidance to improve this article!
© 2020 DK New Media, LLC, All Rights Reserved
