Website design has seen endless trends, from the first ever website as text on a white background, to mono-color templated website themes—we’ve evolved to see a wide range of website design options. And, specifically, website color schemes.
Let’s take a look at:
- How color theory is used in web design
- The color wheel’s application in website color schemes
- The psychology of color
What is color theory?
Color theory stems all the way back to Isaac Newton, whose experiments with prisms in 1665 identified the seven colors in a rainbow. Now, we use color theory as a modern collection of guidelines on how to create color schemes for maximum visual appeal, and even to leverage psychology for the most effective communication.
Firstly, we need a shared language of color terms and definitions. This handy list is from our quick guide to choosing a color palette.
The vocabulary of color
- Hue: what color something is, like blue or red
- Chroma: how pure a color is; the lack of white, black or gray added to it
- Saturation: the strength or weakness of a color
- Value: how light or dark a color is
- Tone: created by adding gray to a pure hue
- Shade: created by adding black to a pure hue
- Tint: created by adding white to a hue
How the color wheel works
A basic color wheel (like the one pictured below) contains the twelve colors used in creating color schemes. It includes primary colors (red, yellow, blue), secondary colors (purple, orange, green), and combination colors made from mixing neighbouring colors (e.g., yellow and orange).
A good color scheme can be sourced from the color wheel by employing techniques to select the perfect blend of colors for your palette.
The color wheel, courtesy of Webflow
Color harmony is the theory of pairing colors in an aesthetically pleasing way—something that should guide web designers when developing their color schemes. For example, complementary colors are bad for text, but the rectangle color technique can help you use colors in a way that is rich and diverse. There are several color combining techniques; however, the two most relevant for good website color schemes, are complementary and analogous.
Complementary colors
Colors that complement each other are easily found as opposite each other on the color wheel, like blue and orange, red and green, and purple with yellow.
On WeWork’s website, for example, the complementary colors bright blue and orange are used in conjunction across the site, both in accents on buttons and links, and pops of color in the selected imagery.
WeWork’s website uses complementary colors of blue and orange
Analogous colors
This color scheme is made of colors that are right next to each other on the color wheel. This color scheme is pleasing to the user’s eye, as analogous colors are often found in nature—like a sunset with orange, pink, and purple tones.
Dropbox’s recent redesign is a perfect example of an analogous color scheme with shades of purple, blue, and pink in bold color-blocking designs.
Dropbox uses bold colors that feel like they shouldn’t work together—but they do!
The psychology of color
Another website design trend is using a single color to dominate a design—and we’re not talking black or white!
Designers are increasingly taking risks and using single bold colors to communicate their web design. No matter what color you need to work with to create a good color scheme, there are best practice examples all over the web. Moreover, when informed by color psychology, designers can make the best decisions for their color schemes that deliver emotional impact.
Color psychology is all about how the brain perceives what it is visualizing. Although subjective, and everyone personally has their favorite color, how colors make us feel is somewhat universal. Using color psychology, designers (and marketers) can leverage color to more effectively communicate their design.
You can learn in depth what different colors mean in this post from Canva.
Red
Red demands attention, associated with love, energy, war, strength, power, and passion. It’s a strong choice for a website but if it stands for something powerful it can be extremely effective.
Yellow
Yellow is the brightest color on the color wheel and is often associated with happiness and joy. As a radiant color, it means symbolizes hope, and confidence. Imaginative designs and brands using yellow can communicate cheer and optimism.
Orange
Orange is the color of adventure and rejuvenation. A mix of red and yellow, it has more of a balanced energy than red, but is still full of life. It is an extremely sociable color, and favored by extroverts.
Blue
Blue is calming, trustworthy, and dependable—though the tech giant Facebook is only blue because Mark Zuckerberg is red/green colorblind. However, you can see banks, insurance companies, and other software giants using blue as their brand color because it promotes trust and loyalty.
Green
Green is alive! The psychology of green means renewal and growth. Nature is the easiest example of green in action. As a result, we associate green with harmony and inner calm.
Pink
Pink can be a tricky color, depending on what context and culture it is perceived in. Once considered heavily feminine in Western culture, we are seeing a shift towards gender biases in color being erased. Other than gender, the psychology of pink includes innocence, optimism, and peace. It may evoke a sense of sensitivity, nurturing, and affection.
Purple
Purple comes in many forms: lilac, violet, and lavender, all of which have distinct psychological reactions. But purple, which is a mix of blue and red, evokes a sense of wealth, royalty, and wisdom. A highly creative color, it’s no mistake that brands use purple to convey their creative achievements.
Formulating a color palette
A color palette is the chosen range of colors to be used in digital design. By creating a color palette and determining a color scheme from the outset of a project, the designer’s mental load is immediately relieved for the rest of the project, leaving room for imagination and creativity. These chosen colors are the boundaries to any design and are separated into primary, secondary, and accent colors.
Dominant colors
Firstly, you need to decide on the dominant color your website will display and be associated with. This most often is the dominant brand color of the company you are designing for. Dominant colors can be used in monochromatic palettes using one color as the hero, or as a first choice with surrounding complementary colors.
Secondary colors
Secondary colors are just that—your second-most-used color choice. This selection is often the most important decision faced by a designer, because this is where color theory comes into play. The secondary color selection is where you decide on a color combining technique (complementary, analogous, triad) and design accordingly. Essentially you’re deciding on a bright bold design with color that oppose each other on the color wheel, or a more softer approach with similar colors that are easier on the eye.
Accent colors
When it comes to accent colors, we’re talking about backgrounds, white space (or not), links, buttons, and icons. If using a monochromatic color palette, for example, you may use bright colored accents against a neutral design. Often brands will use their primary brand color in accents only, leaving a white background.
Free tools for creating a color palette
If you need a free visual aid to color combining, check out these free resources below:
- Muzli Colors: Use this tool to quickly create and edit color palettes, color match, and even preview and download customized UI kits per your own color choices.
- Coolors.co: Use this tool to generate color schemes with just a click, and explore thousands of user-generated palettes.
- Canva color palette generator: Use Canva’s free tool to generate color schemes from your favorite photo. Perfect for creating color schemes that perfectly match an image you need to use in a web design.
- Colormind.io: Colormind also lets you generate free color schemes, but also applies them to a mock landing page in real time so you can visualise your website design from the start.
Modern website color palettes
With the plethora of design and color decisions available when designing websites, we’ve pulled together some modern color palettes to spark your inspiration.
Analogous color scheme
Similar to Dropbox’s design above, Useless London uses a bold blue and green analogous color palette that is pleasing to the eye and nicely communicates their ideas.
Useless London
Complementary color scheme
Colors opposing each other on the color wheel are complementary colors, like purple and orange.
Kin Europhorics’ website uses its primary brand color orange as an accent, and pairs it with bold purple imagery for a dramatic (and europhic) effect.
Gradient color scheme
Gradients are when one color progresses seamlessly into another. It’s a great idea for merging analogous colors like blue and green, and a great color scheme for website backgrounds that lifts the design from one flat color. A company that does this best is probably Spotify, with gradients used across their entire product ecosystem.
Modern color scheme
E-commerce brands love this color scheme. Use one brand color and pair it with crisp product imagery and white space. Think: hims, Outdoor Voices, and Casper.
Monochromatic color scheme
A monochromatic color scheme includes all the colors (tints, tones, and shades) of a single hue. This hue could be any color—but the color scheme sticks to only that color and the variations of its shades, tones and tints.
This example, from Axiology Beauty, uses a soft red as the main hue, with various lighter shades to complement.
Muted tones palette
A muted tone palette uses hues that have been mixed with black to lower its value and takes away the brightness of a color. Think autumn tones, like the Stumptown Coffee website that uses muted tones of brown, red, and blue to create a cozy palette that reflects its brand.
Primary color scheme
Primary colors are the parents of the color wheel: red, blue, and yellow. The base for secondary colors, using just a primary color palette is a bold design choice that can elevate a web design.
Bumble uses primary colors in equal measure in their website color palette.
Vintage color scheme
Using vintage colors in your website color scheme is a great idea for products of an actual vintage nature (think Polaroid), and also just a great aesthetic choice. Agency five/four uses red and brown tones to create a vintage color palette and pairs with grain and sepia edited photos for the full effect.
by Jess Thoms
Jess is a writer and brand strategist, focused on championing innovative ideas in tech, design, and marketing. She is the co-founder of conversation design studio Xandra, Inc.
