• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Genesis User

Genesis User

Build your own website using a StudioPress theme and Genesis Blocks plugin..

  • Home
  • StudioPress etc
    • Genesis Blocks
    • StudioPress
    • Genesis Pro
    • WP Engine
  • Get Genesis for Free
  • Themes
    • Genesis Sample Theme
    • WP Engine Themes
  • Genesis Blocks
You are here: Home / Genesis Blocks / Website Builder / Color Schemes for Websites a Really Simple Guide

Color Schemes for Websites a Really Simple Guide

March 17, 2021 by PhilG

Color Schemes for Websites: an overview of this page

Go to brandcolors.net and choose a primary and a highlight color. Click any swatch to copy that color’s hexadecimal code to your clipboard. Paste the hexadecimal codes into MakeTintsAndShades.com.

To get shades of grey based on your primary color, paste the hexadecimal code for the 70% shade of your primary color into the input box on the Make Tints and Shades website.

You will need three colors…

  • Primary color
  • Highlight color
  • Grey, based on your primary color

Variations of these colors

You will make tints and shades of these three colors.

Click the image to see the tints and shades I used.
See the Tints & Shades I Used

To do this type in the hexadecimal code for the primary color and the highlight color, then press the button that says make tints and shades. This gives you twenty-two tints and shades of each color.

To make a set of greys that have a hint of your primary color, copy the hex code from the 70% shade of your primary color and paste that hexadecimal code into the make tints and shades box. Then press the make tints and shades button again.

This adds a set of greys with a hint of your primary color to your palette.

This gives you sixty-six tints and shades based on your three colors.

When you need to use a grey color, the grey will look more in tune with your design because it’s based on your primary color.

Why so few colors?

By only using three colors you make it easy to understand which parts of the page are important. Use the darker shades to attract attention, and use the lighter shades to add subtle colors for styling and visual effect.

Use the highlight or call to action color sparingly, so when you use it, it really stands out.

Click Me

Picking colors

There are many ways to find color schemes, use these suggestions to help you get started.

  • Use your own brand colors.
  • Search Google images for blue color palette.
  • BrandColors.net lists the brand colors of hundreds of businesses.

Making tints and shades of your main and highlight colors

I recommend you use only three colors.

  • Main (or primary) color.
  • Highlight color for calls to action.
  • Grey taken from your main (or primary) color.

Once you’ve chosen your main (or primary) color and your highlight (or call to action) color, go to MakeTintsAndShades.com and paste in the hexadecimal code for each color. You should have two hexadecimal codes stacked one on top of the other. Then click the button that says Make Tints and Shades.

This gives you twenty-two tints and shades of each color.

Making the grey color

You could just use a standard grey color, but there’s a better way.

  • Copy the hexadecimal code for the 70%, 80%, or 90% shade of your primary color on the make tints and shades website.
  • Paste that grey hexadecimal code into the box below the main and highlight hexadecimal codes. Then click the make tints and shades button again.

This gives you a set of greys that have a hint of your primary color.

If you prefer to use pure grey colors, when you need a grey use these hexadecimal codes as is.

  • #333333
  • #666666
  • #999999
  • #DDDDDD
  • #EEEEEE
  • #F4F4F4
  • #FAFAFA

All the colors you need

You now have all the colors, tints, and shades you need to build a professional website.

Just three colors

A simple color palette makes it easy for you to build a visual hierarchy. By using a light or dark shade of your primary color you tell the reader which part of your page is more important and which is less important.

Why not more?

Some websites use a lot more colors than this. The reason we’re sticking to one primary color, one highlight color, grey and tints and shades of these three colors is simple.

For instance, you could use dark shades of your primary color to grab the eye and draw attention and use pale or pastel shades when you want to use color for a more subtle visual effect.

The highlight color

Only use the highlight color for important elements, such as call to action buttons that you don’t want the reader to miss. If you use the highlight color too often, it will lose its effect and won’t grab attention in the same way.

Grey goes with everything

You can use the shades of grey for almost anything.

  • Font colors.
  • Less important buttons.
  • Background colors.

How do you get the hexadecimal color codes?

Brand colors dot net

  • Click any color to copy the hex code to your clipboard

Firefox browser has a color picker built in.

  • View a web page using Firefox.
  • Right click the screen.
  • Choose: Inspect Element (Q).
  • Select the eyedropper in the dialogue that pops up.

Chrome browser

  • Use the Chrome extension: ColorZilla

Choosing accessible colors

This is important when choosing text and link colors, and it’s especially important when you place text on top of photos.

As you use the block editor, WordPress will try to work out if the text and background color combinations you choose are easy to read. You might read the text, but visually impaired people who visit your website might not.

If WordPress thinks you’ve combined background and foreground colors that make reading the text difficult, it will open a dialogue box asking you to lighten or darken the color. This will give more contrast and make the text easier to read.

These built-in tools help, but always keep accessibility in mind as you build your pages. If in doubt, add more contrast and make you text easier to read.

Only highlight what’s important

Filling your page with a riot of color to draw attention to every section of your page is not a good idea. Decide what page elements are important and highlight them.

If you only highlight the important page elements, the reader can tell immediately what’s most important.

KISS

You can build a professional looking website if you keep it simple, but the fastest way to look amateurish is by Jazzing it up or adding bells and whistles.

Filed Under: Website Builder

Download Genesis Framework for Free

The Genesis Framework and the Genesis Sample theme are now free for all to download and use.

Get Genesis for Free

Footer

Search This Website

Get Genesis for Free

The Genesis Framework is now free, find out how to get it here…

Get Genesis Free

Did you see these pages?

  • WP Engine Themes (From StudioPress)
  • Genesis Blocks Tutorials
  • Get Genesis for Free
  • Genesis Sample Theme
  • 10 Free Themes With WP Engine Hosting
Get 10 StudioPress themes free with WP Engine hosting.
Get 10 StudioPress themes free with WP Engine hosting.

Copyright © 2022 · Genesis User: This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc.
WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.