Color your WordPress Posts and Pages

bykppowell

110 followers

Updated 2 months ago

Color is a great tool!

It breaks up swathes of monochromatic text and visually ties together your site. Just like the words you write, color can convey your personal style, set a tone and a mood, and influence user experience.

I have been trying to use blocks of color in lieu of (tons) of images so as not to hurt page speed. But being new to WordPress I only just now discovered a super efficient way to carry color from page to page throughout my site.

For others who are new to WordPress, I wanted to share.

I am using the Generate Press theme, but I imagine something comparable is possible in other WordPress themes.

Login to WordPress .

Under Dashboard click on Appearance.

Under Appearance click on Customize.

Under Customize click on Colors.

Once you click on Colors you should see this:

Your theme will have come with certain colors preinstalled.

You may have already figured out that you can access your theme's colors from any given page to change text or background color.

But you can also add colors to this palette, making those colors just as easily accessible so that you can then use them consistently throughout your site.

See this circle with a plus sign?

Click on it and it will add a new "checkered" circle with no color value (yet).

Next, click on the checkered circle and this window will open.

You can slide the color bars, if you like, to generate a new HEX color value, which will appear in the bottom box.

OR, you can manually add (meaning type or paste) a HEX color value of your choice in the bottom box. And if you so choose, you can also name it (in the top box).

Once you have added your new color (or colors) make sure to click on the Publish button.

This will save your changes, adding your new color (or colors) to your palette and making them readily and consistently available to you as you create your posts.

Now you could haphazardly create colors as described above.

Or you could randomly select colors from any number of websites about colors and color theory, which will give you both color inspiration and HEX values.

But what if you want to match a specific color?

Say a color from a particular image you have used in one of your posts? Or a color in your site's logo?

Check out imagecolorpicker.com:

This site is FREE and works from your browser, so no downloading.

The main page will look like this:

You don't have to "Login" or "Sign Up," just click on the button that reads "Use your image."

Once you do so, this window will open.

Now upload an image of your choice.

You should be pretty familiar with this step as the image upload window in imagecolorpicker.com is much like SiteContent or WordPress image upload windows.

As an example, I'm going to use the featured image from the video from Class 4: Creating a Professional Logo from the HUBS Series: Laying the Groundwork for Your Business. This too should be familiar.

So I uploaded this image to imagecolorpicker.com and voila! This is what I now see:

I want you to notice a few things:

First, the arrow at the bottom left.

• See how imagecolorpicker.com has generated an image specific palette? Pretty nifty!
• Notice the black dot on the first color? Its there because I have clicked on that color.

Now look at the arrow at the top of the page.

• This is what happens when I click on a color from the palette. imagecolorpicker.com shows the color in this box along WITH its HEX value.
• You can then copy and paste this HEX value into your color palette in WordPress (as explained above).

But wait, there's more ... literally.

The third arrow in the image points to text that reads "show more". When I click on show more, here's what imagecolorpicker.com delivers:

Shades and tints.

Color combinations.

And a color contrast checker.

AND ... if you hover over any color block on this page (and it is a single page) you will not only see the color's HEX value but you will also be able to copy that value with a single click and, subsequently, paste it into your color palette in WordPress (again, as explained above).

Wow! So cool!

I used this to create a palette of colors that complemented my site's logo, often lightly tinted colors that provided good text contrast.

I hope this brief post helps!

I ask a lot of questions (I think) and, in return, receive lots of good assistance from Kyle and from the WA community.

Every now and then I stumble across something that seems to me to be particularly useful. I hope by sharing I am giving back ... at least a bit.

If you have any questions or get hung up, please do let me know.

If you have any relevant tips, please share those too!