choosing color schemes from photography

How to choose colors for your website

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 a lot of software programs specify a color by using hexadecimal value codes. The color code itself is a hex triplet, which represents 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.

Screenshot of hex code examples from color.hailpixel.com

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, as well as 2 complimentary colors, now choose a background color. Sounds easy enough, right?

Always test how these colors play off of each other, how does your light text look 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.

Color examples from a couple of my own photos

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 it’s 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.

Making my favorite pork dish, look at these colors!

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 as well as 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 was 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

Michael Winchester
michael.winchester@gmail.com

Michael Winchester Design | (562)673-8880