Attaining Balance in your Website’s Color Scheme

Advertise here with BSA

Designing for astute balance is never an easy task. Although it should be a primary objective in each designer’s mind, balance tends to appear once a composition has reached a state of equilibrium. This requires some idea generation because it’s silly to assume that balance can be achieved from a blank page.

In this post I’d like to cover a few guidelines and general tips for designing a clean color scheme. This stage may undoubtedly be one of the most complex yet significant parts of an entire website. Colors are used to convey a certain mood or attitude in the minds of visitors. Pairing the wrong colors together can be detrimental to the overall website. But with the help of color generators and some useful tips the color-picking process can become much smoother.

Choosing Relative Colors

Branding a website includes much more than just a logo design. While graphics and logos are important, the whole website should feel like one big entity. This occurs through matching typography and icons, but also through color choices.

When first starting a new web project the color scheme may appear fairly arbitrary. But it will turn out to be one of the most important decisions you make. It’s worth examining what other sites have done and how their color scheme matches with the logo and overall site content. Even if you’ve settled on a particular shade of burgundy, you might look into darker shades of red and maroon for other areas.

Relative color matching happens once you have one or two ideas in mind. You don’t need to start with a full color scheme – just one color that you know matches perfectly. From there you can test out different ideas to see what blends nicely into background or foreground elements.

Naturally the quickest way to get better at this task is through practice. But the additional support of tools and webapps can be indispensable. The website UI Colors is one such example demonstrating a variety of choices like you’d expect in a swatch book. Each color is paired with the option of HEX or RGBA syntax.

Matching & Pairing

Once you have a color or general range to start with, putting together a color scheme becomes much less challenging. But of course there are many stages to the graduality of color selection. Getting your foot in the door with a single choice helps you pinpoint a starting location.

From here you can determine which areas of the page need to stand out, or which need to feel more “set back”. Warmer colors tend to jump out while cooler colors often recede – but this is not always the case. As I mentioned before, designing with color is all about pairing certain hues together. How a single color behaves is mostly emblematic to the bigger picture.

I would highly recommend using a tool like Paletton to get your color scheme moving forward. This lets you choose between a single monotone scheme, or 2-4 different colors matched together. Paletton offers different shades of each color with more & less saturation in each one. Determining which colors should be put together is subjective and predicated upon the design at hand.

To get something going put together a list of the different page elements which need to receive color. Think about their relationship to other page elements and how much they need to stand out from the background. For example, purple and yellow contrast nicely on top of each other if the hues are balanced. If they get out-of-whack then problems can occur quickly.

Color matching isn’t a hard science because there are often exceptions to common rules. The best thing to keep in mind is how complementary colors work together in certain shades. If you really need red and blue together in a layout, try adjusting the blue to a blue-purple. If you don’t like a particular color pair then change it up and see what else you can make. Don’t settle for anything less than outstanding.

Avoid Solid Black

Most digital designers recognize that solid black isn’t a very common color – but why? This is an important topic since the default text color for all web browsers is usually pure black(#000). However I would advise against using this because it’s never something you really see in art or design styles.

Ian Storm Taylor wrote an excellent piece on why you should never use black pulling from his recollections of high school art class and studying at RISD. The premise follows that digital design replicates ideas from fine art, and fine art replicates ideas from real life. Although to your eye things look black, they’re never actually pure black. In fact most “black” colors are just really dark shades of a certain hue(dark blue, dark orange, dark brown, etc).

That’s all fine and dandelions but how does it affect web design? In terms of color scheme design it helps when choosing a sect of dark colors to match with the rest of the page. The best choice for any dark color is a reduced saturation from one of your main colors. For example a green button with much darker green text should produce enough contrast to read at a distance.

The problem with too much contrast is that it provides sensory overload. Kinda like how I explained the combination of yellow and purple can work great in some instances – but for excitedly bright purple and yellow the contrast becomes a nuisance. This is my problem with pure black text on a pure white background – there’s too much contrast and it looks too crisp.

If you need a dark/light contrast keep them away from the extremes. Or at the very least avoid one extreme and cater towards the most comfortable common denominator. At times this may feel lazy but superb design isn’t always created with the most aesthetically mind-blowing graphical skills. Sometimes you just stick to what works because in the end that’s what really matters.

Webpage Highlights

Now that I’ve covered a little about dark shades I want to share a couple tips on highlights. Much like in a painting, websites should have brighter colors and more subtle colors paired together. A more vibrant page element will stick out and draw attention from the user. In many cases these bright colors may still be fairly dull – each project resembles a different idea and should be treated as such.

But even dull highlights are still highlights. Everything is relative and I find it helps to pick out a series of colors that would best suit the website’s branding. Cater to the company’s logo with a color scheme that pops in just the right hues.

Again there is no easy method to achieve this. You just need to keep trying different ideas and see what tends to work best. I’ve found a nice balance juggling between 2-3 brighter colors with opposite ideas for the darker shading. Then you might tack on some extra subtleties like greys for a cool background effect.

Going back to the painting comparison, there are many differences between traditional art and web design. Colors are used to emphasize different elements but the effects are similar – certain colors when paired together stand out as foreground and draw attention from the eye of each visitor. Use this effectively and you’ll be able to captivate an audience without too much effort.

By starting with a realistic color scheme it becomes much easier to work around ideas in your head. Balance is achieved gradually as you test different colors and color matches together. A lot of this process is mentally intuitive so you’ll get better with practice. But it will never be an easy task because each project requires dedication and patience. Hopefully these tips and resources can prove useful to web designers learning more about color choices.