We now have the foundation laid for our website. This is a lot like building a house. We can’t get to our destination if we don’t know what the finished product looks like. Much like home builders have blueprints, we must have a blueprint for where we are going. For our simplified example, I’m going to use a color scheme website to help us pick the color palette. There is a lot of theory and science around colors that we won’t get into here. For now, we’ll use this site to help us pick a color scheme.
The color scheme website allows us to pick different types of color schemes. In this example, I’ve chosen “analogic“. Note the color wheel on the bottom left of the page. There are little dots (see red box below) that you can drag with your cursor around the wheel to change the colors. On the right, there is a box of different colors that you can choose from. These will change as you move the dots around the wheel.
This site allows you to save your design for future reference by clicking the “Export” menu on the top right of the page and choosing “HTML + CSS”. You will be forwarded to a page with your scheme and the hex color codes. This link (http://colorschemedesigner.com/#3y51Cw0w0w0w0) was produced by my color choice as shown in the image above. Go ahead and follow the link I just included, and you’ll see the scheme we’ll use going forward with our site build. Be sure to bookmark your link so you can return in the future.
At the bottom, right of the main page you will see a link labeled “Light page example”.
Click this link. It will pop up a window showing you an example of a website built using the colors produced by our selection on the color wheel. Note the Light page example shown below.
This will be our target color scheme for the rest of this guide. Don’t lose your link if you are choosing different colors than my example.