Lesson 9 Colors

Build Your Wordpress Website Module One, Lesson 1: Domain name and web hosting

Lesson 9

Colors

We now have our branding adjectives and a pair of fonts. Let’s move on and explore colors.

The basics

As a general rule, white is a good background color for websites. Almost black is a good color for the text (pure black on pure white can cause eye strain).

What is “almost” black?

Jargon alert:

Hex code - A computer understands color through numbers and letters. A hex code is a “#” symbol, followed by a combination of six numbers and letters. Sometimes the hex code is all numbers, and sometimes it is all letters - usually it is a combination of both.

Each hex code represents a single, specific color. For example, when I have a headline and designate the color as #ffffff, the headline appears in the color white.

The hex code of white is #ffffff The hex code of black is #000000 (these are the number zero) The hex code of almost black is #0c0c0c

Let’s save these colors in your branding elements document.

1. Open your branding elements document 2. Enter “Background - white - #ffffff.” 3. Enter “Text - almost black - #0c0c0c.”

4. Save.

Great! Let’s move on.

The search is on

We are looking for two more colors, as accents. A main accent color, and a secondary accent color.

When your business is ready for custom branding, and you get a style guide, it could look something like this:

(Source: fiverr.com)

Many style guides have four or five colors. We are going to use two. Two is enough to achieve a branded look without getting too confusing. With two colors, we avoid questions like: Which color do I use now? Does it look too overwhelming? Too scattered?

When choosing the accent colors, there are two ways to go.

1. If you have a logo that you want to use, and if the logo has colors - choose two colors from the logo.

2. If you don’t have a logo, or don’t want to use your logo, then we will choose colors.

If you have a logo you want to use

Take a look at your logo. Does it have two colors you can use as accent colors? Or maybe only one color?

If your logo has two colors you want to use, great! If it has one color (the main accent color), you will be choosing a secondary accent color.

To find the hex codes of your logo colors

If you can ask the designer for the hex codes, that’s great! Add them to your branding elements document. You can move on to the next lesson.

If not, let’s grab those logo hex codes now.

1. Go here: https://pixlr.com/ 2. Click “Advanced Pixlr E.” The Pixlr Dashboard opens up. Pixlr is an image editing program.

3. Click “Open image.”

4. The file explorer will open up. Find where your logo is saved, and click “Open.” 5. Your logo will appear in the center of the page. 6. Since Quiet Mothering does not yet have a logo, I chose a random image of logos from the web. This is what it looks like when an image is uploaded into Pixlr:

Notice the image in the center, and the controls on the two sides and in the navigation bar at the top of the screen.

To find out the colors of the logo, we will use a tool called the Color Picker. 7. Find the color picker in the toolbar on the left. It looks like an eye dropper.

8. Click the color picker. 9. Hover over the different elements of your logo. The color in the color picker changes to the color it is hovering over.

10. Hover over the different parts of your logo until the color picker has the color you want to choose as the main accent color. 11. When the color picker has the correct color, click the mouse. The color will appear to the left, beneath the Pixlr toolbar.

12. Click the circle of color beneath the toolbar.

13. A data box with information about the color opens up. Find the hex code.

14. Enter the color name and hex code to your branding elements document. a. Open up your branding elements document. b. Add “Main accent color - [color name] - #hexcode.”

c. Save. 15. In the color data box, click “OK.”

And now the secondary accent color

1. If your logo has a color you want to use as the secondary accent color, hover over that color, and click it. 2. Click on the circle of that color on the left hand side of the screen. 3. Find the hex code. 4. Add the color/hex code to your branding elements document. “Secondary accent color - [color name] - #hexcode.”

If your logo has one color, and you need to choose a secondary accent color, take a look at the colors at the top of the screen.

These colors go with your main accent color in various ways, based on the color wheel. Since this is a website guide and not a design guide, we won’t go into the details.

What’s important for us is that these colors definitely match well with your chosen color. If you choose one of them as a secondary accent color your website will have a branded, cohesive look.

Time to think of your clients

Think of your brand adjectives, of the feeling you want a prospect to feel when they visit your website.

Which color, combined with your chosen color, achieves that feeling?

Remember, we are aiming for 70-75% accurate.

1. When you have chosen a secondary accent color, click on it at the top of the screen. 2. Click on that circle of color to the bottom left.

3. Find the hex code in the color picker data box. 4. Add the color and hex code to your branding elements document.

You now have two accent colors!

If you do NOT have a logo

If you do not have a logo yet, we are going to start from scratch to choose accent colors. The site I am using in this guide, Quiet Mothering, doesn't have a logo. I will choose colors along with you.

Let’s find our colors

Canva to the rescue! Canva has a lot of great information about color to help us choose our accent colors.

1. Go here: https://www.canva.com/learn/website-color-schemes/

2. This page is full of website color palettes. Scroll through the palettes and see which one seems like it would fit your audience and your business. 3. If you want to look more into color psychology before choosing, take a look at this page: https://www.canva.com/colors/color-meanings/. This page is full of colors. When you click on a color, you get an exploration of that color and links to color combinations you can explore as well.

When exploring the color schemes and individual colors, think about your brand adjectives. Could these colors represent your brand? Could they help your web visitors feel what you want them to feel?

Remember, we are aiming for 70-75% accuracy. Set your timer for 20 minutes. Then choose. If you absolutely must have more time, give yourself another ten minutes. And then choose.

1. Once you’ve chosen colors, open your branding elements document. 2. Enter your colors: a. “Main accent color - [color name] - #hexcode.” b. “Secondary accent color - [color name] - #hexcode.”

Great! You have your main and secondary accent colors!

What I chose

For Quiet Mothering, I chose from the Canva website color palettes. The palette number I chose is - #35: Cool Jewel Tones.

Why did I choose this one?

My brand adjectives:

● Friendly ● Inviting/accepting ● Feminine (but not too girlie)

The two dark purple colors felt friendly, peaceful and accepting. Like with those colors we can put our feet on the couch and not worry about getting it dirty. And both the pink and purple felt like the grown-up version of girlie. Not too cute, but definitely for women.

Quiet Mothering accent colors:

● Main accent color - Amethyst - #675682 ● Secondary accent color - Rose - #e52a6f

You are done with this section when: You have 4 colors and hex codes added to your branding elements document.

● White ● Almost black ● Main accent color ● Secondary accent color