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.
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.
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.
