Use a color picker to Customize WordPress (for Mac)

If you are a Windows user you can use Color Cop.

For Mac: Website Colors Use a color picker to customize WordPressHow to find website colors to use in WordPress

When customizing a WordPress theme, most of the design magic happens in the style.css stylesheet file. But you can also change some of your theme colors in Customize.

To change website colors, you first need to know a color’s hex code. A hex code starts with the hashtag and is followed by six digits, a combination of numbers and letters.  For example, white is #FFFFFF and black is #000000.  This hex code #333399 would give you an indigo blue.

A color picker program makes it easy to find the hex code. You can build your website’s color scheme from a photo. You can color-match your logo. We use this tool every day!

ColorNote: a free Mac Color Picker

colornote iconFor the workshop, we recommend you install from the App Store this free utility called ColorNote –  it can be used in any application on your computer not just a specific browser.

Using ColorNote:

We will show use ColorNote during the workshop, so you don’t need to play with it yet but if you want to give it a try here’s how it works….

  1. Launch the utility.
  2. You’ll now find a new round eyedropper icon in your top menu bar.
  3. Click on the eyedropper icon to open the utility
  4. Now click the circle and move your mouse pointer around your screen the colorpicker will detect the Hex color number
  5. Click and you will hear a sound as it stores the hex code to your clipboard.

Screenshot using SIP to find hex color

Now that you have the hex color you can easily customize colors in your WordPress website. Open Customize to see what options your theme provides.

During our 2-day WordPress Workshop, we’ll teach you how to use hex colors without editing code. In our HTML & CSS Workshop, we will go further, opening and editing style.css files.

More tips in our WordPress for Beginners series

We hope that you’ve found these WordPress for Beginners tips helpful.

This post is part of our WordPress Beginners series. If this post was helpful you may be interested in reviewing our WordPress Launchlist.

If you want to learn more about WordPress, attend one of our WordPress Intensive Workshops in Toronto.

Leave a Reply

Your email address will not be published. Required fields are marked *