Choosing colors for your website
Choosing a color combination or color scheme for your website can seem daunting at first, but with some pointers, a little imagination, and a couple of online tools, you can have your hex codes together in no time.
First things first, what is a hex code?
A color hex code is how the internet and many software programs specify a color by using hexadecimal value codes. The color code itself is a hex triplet, representing three separate values that specify the levels of each component color. The code starts with a pound sign (#, not a hashtag though it is the same symbol) and is followed by six hex values or three hex value pairs. See the image below.
How many colors do I need to pick?
Most designers agree that you will need at least 3 colors to really set up a website’s palette. I find that 4 is good and no more than 6 is ideal. Any more, and you tend to lose focus. You can always use tints and shades of your primary color palette to add depth.
You want to select a dominant color and 2 complimentary colors, now choose a background color. Sounds easy enough, right?
Always test how these colors play off each other, how your light text looks over that dark background, and vice versa. Your colors should not only complement each other, but they should help your website stand apart from your competition. Color is one of the first things customers associate with a brand, the psychology of colors is a whole different topic.
SELECTING THE COLORS
Using nature to identify color combinations
This is by far my favorite method for selecting color palettes. Nature comes up with the best color combos all the time. Think bougainvillea vining through a lemon tree, with its bright reds and purples offsetting the dark green and bright yellow. It’s quite a spectacular combination.
Using photos to select colors
Color is all around us, and I have developed some amazing color schemes from photographs, everything from pictures of rusty garden tools to city-scapes and the whatnot in between. People like what is familiar, so draw from you or your client’s surroundings. Don’t be afraid to experiment and be bold.
Selecting from well-known combos
I like to draw inspiration from where I can, especially when it comes to color palettes. I look at everything from food packaging and magazine advertisements to brand color studies and paint store swatch areas.
I have had clients who said to me, “Can you use Dodger blue?” or “I want a John Deere green and yellow logo.” While it may seem counter to what we as designers would do for color inspiration, sometimes we need to pick from known palettes. These big box brands have enough color study to bankrupt a small business, to harm in lifting some color cues. In those cases, you can use Chrome’s Color Pick add-on. It works just like Photoshop’s eyedropper without the need to open your source image in Photoshop. It even has pinpoint accuracy and adjustable zoom function.
Other cool color tools:
Google has a great bare-bones color picker that lets you select colors based on a sliding scale and gives you the Hex, CMYK, RGB, HSV, and HSL value codes for each. This is really handy for getting a CMYK value for RGB color and vice versa.
https://htmlcolors.com has a wide array of color tools, from color pickers and gradient swatches to brand colors and palettes. A valuable resource.
https://color.hailpixel.com is a really cool site for choosing a color. You move your mouse to select a color, click to save the swatch, and so on. It gives you the hex code for each and the ability to delete each color and get the RGB and HSL for each. I found this one super fun to play around with, I wish there were a way to save the swatches, but screenshots work for me.
https://brandmark.io/color-wheel/ uses AI to recolonize logos, wireframes, and illustrations. Great for checking different color variations of your work.
More reading:
Color, psychology, and design: by Muditha Batagoda: https://uxplanet.org/how-color-can-effect-emotion-ccab0431b1d
With a background in design for the music industry, I bring a fresh approach to corporate and construction-related web projects.
I also write short, easy-to-digest articles on search engine and website performance-related topics.
My goal is to help clients better understand what SEOs do for them.
Michael Winchester is a website developer and search engine consultant in Southern California.
Michael Winchester Design | (562)283-5688