There can be no doubt that color plays a major role in the design of a website. Mike Kus in the article, "Nine Things I've Learned" captures this sentiment best:
There are many contributing factors that go into making a good visual design, but one of the simplest ways to do this is through the use of colour. The colour palette used in a design can have such a profound effect on a visual design that it almost feels like you’re cheating.
So how do we begin to develop our own color palette? The basic steps include:
- Selecting a base color while taking into account the effect colors have on our perceptions and feelings.
- Choosing color harmonies from the color wheel, i.e. what colors will work well together.
- Selecting the right tones, shades and tints for each color in the color scheme.
...But practically speaking, how do you begin?
The first step in creating a color palette is to choose base colors. If you already have a logo to work with, the colors in the logo are good place to start from.
A great technique for honing in on colors for a website is to create a list of adjectives that describes the mood and qualities of the site’s content and the message being conveyed as described in "Expressing Mood and Meaning with Typeface."
Here is the list of adjectives I used to describe my consultancy, ViewThought, when I chose a typeface:
- Cutting Edge
What adjectives describe your project?
Conveying Meaning with Color
It's no secret that colors convey meaning, take for example red and yellow. Which would you use to represent happiness?
So the trick for picking colors is to select colors that best match the mood and meaning you are trying to convey, as described in the adjectives list.
Take a look at the following references. They will give you a better handle on traditional Western color representations. I emphasize Western because where your audience lives matters when selecting colors.
After reviewing these references, and based on my list of adjectives, I came up with a few colors for ViewThought. You will do the same for your project. Use the following list of color meanings pulled from these sources to help you select. I've added comments from my selection process for ViewThought.
Color Representation List
- White - This makes a lot of sense to me since we start our adjectives list with the word "Clean".
A white color scheme can represent cleanliness, purity, perfection and space...If you are looking for a clean design with plenty of negative space, play around with white more. - BaCS
- Red - As an overall base color I'm not sold on it for my purposes, but I do have some callout buttons so will keep this color in mind if it fits in my color wheel choice.
A red color scheme is bold, fiery, aggressive and screams for your attention...Red is a really powerful marketing color that can be used to grab the user’s attention and get them to click on an ad or register for a product. - BaCS
Red is the color of extremes. It’s the color of passionate love, seduction, violence, danger, anger, and adventure...Red captures attention. It is one of the most visible colors, second only to yellow... - MoC
Dynamic, vital, romantic, commanding, alert, rebellious, complementary, joyful, visible, hot, and fun. - CiM
- Orange - This might be the one. Aside from the fact that the parent company of View Thought uses it, it's feel seems to touch on a lot of the adjectives I have listed, plus it could be an alternative to red for callouts.
An orange color scheme speaks happiness...Orange is a very friendly color, a warm color that is inviting and can be another very effective color for call-to-actions. - BaCS
Orange is vibrant. It’s hot, healthy, fruity and engaging – but it can be abrasive and crass. It’s a polarizing color. People either love it or detest it. - MoC
Helpful, burning, cozy, abundant, warning, flavorful, festive, active, excited, communicative, and inspiring. - CiM
- Green - I'm liking this one insofar as it touches on trust and stability.
A green color scheme is peaceful and natural and is usually associated with growth, harmony, peace, strength and stability....it portrays a feeling of safety and trust... - BaCS
Green is no longer just a color. It's now the symbol of ecology and a verb. - MoC
Patient, natural, adventurous, relaxed, athletic, unfortunate, lucky, balanced, safe, and sharing. - CiM
- Blue - Well if this isn't the cats meow.
Blue means stability and depth and is a great color for creating a calm clean environment. Blue symbolizes confidence, faith, hope, wisdom, knowledge and trust. - BaCS
Blue is the favorite color of all people...Most blues convey a sense of trust, loyalty, cleanliness, and understanding. On the other hand, blue evolved as symbol of depression in American culture...Blue is the most commonly used color in corporate identity. - MoC
Technical, deep, free, educated, protective, lonely, peaceful, cold, clean, authoritative, and formal. - CiM
- Yellow - Creative is good, so is young, but coward... not liking that.
Creative, young, visible, right, cheerful, lightweight, curious, coward, playful, nutritious, ill, and expanding. - CiM
- Purple - Not quite the look I'm looking for.
Intelligent, artistic, aloof, luxurious, loyal, vain, fantastic, melancholic, feminine, fragrant, and solemn. - CiM
So based on this preliminary research, white, orange and blue are looking like very strong candidates for ViewThought's color palette.
Converting to Hex Values
Once you have an idea about the colors you want to use, find their hex values. I like to use the tool 0to255. It gives you a lot of options in terms of shades. 216 Web Safe Colors is also a good tool for this.
Possible candidate hex values for ViewThought are:
- White: #ffffff
- Orange: #eb7e28
The Color Wheel
The color wheel is the basis from which our color choices will flow. It will help us find color harmonies based on color theory.
There are a number of online color wheels we can use. There is a list of them here.
Use the color wheel and the base color(s) selected in Step 1 to derive additional colors that will work well together.
In the following example I use the base color #4B99F9 in the tool Color Wizard, and select the Monochromatic method:
The result is 4 colors: #4B99F9, #054DA5, #DFECFD, #A2A2A2. This would be your color palette if you were happy with these results.
Play around with different color wheels, and experiment with different color harmony methods:
For a Deeper Dive into Color Theory…
The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it. The human brain rejects what it can not organize, what it can not understand. The visual task requires that we present a logical structure. Color harmony delivers visual interest and a sense of order.
- Color Matters - Basic Color Theory
The following articles do an excellent job of defining the fundamentals of color theory, and the basic steps and components in building a color scheme:
Alternatives to the Color Wheel
It's a good idea not to rely solely on the color wheel.
1. Find different shades of a color...
For example, there's a tool I like to use for finding different shades of a color:
(Color Palette Creator)
2. Generate a color palette from an image...
I've also been considering using a hero image on our homepage. A color palette that matches that hero image might not be a bad idea. There are a number of tools that will create a color palette based off of an image:
(Color Palette Generator and Pictaculous are two I like to use.
3. Browse a color palette sharing service...
My favorite... Take a look at color palettes created by the design community. You never know what you will find or be inspired by.
Here are some of the palettes I have added to a "My Favorites" list in the palette sharing service Adobe Kuler:
I'm strongly considering the following palettes for my consultancy:
Apply Your Colors
With colors you can set a mood, attract attention, or make a statement. You can use color to energize, or to cool down. By selecting the right color scheme, you can create an ambiance of elegance, warmth or tranquility, or you can convey an image of playful youthfulness. Color can be your most powerful design element if you learn to use it effectively.
- Basic color schemes - Introduction to Color Theory
Applying a color palette is a practice in trial and error. Before you begin, it's helpful to revisit sites that have inspired you. Design is super difficult, so don't get frustrated, just keep plugging away and experimenting...
Which color works best for the hero background, for header colors, for the navigation bar, for your footer background color, four lines between content sections, for the logo itself?
In answering these questions I like to create different renditions of my color experimentation in different Git branches. It's okay to move your information blocks around, even reinvent the flow.
Want to know when the next article is published? Subscribe here. Thanks for reading!