Use a color picker to Customize WordPress (for Mac) | LearnWP

Use a color picker to Customize WordPress (for Mac)

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

How to find website colors to use in WordPress

When designers customized a WordPress theme in the past, they performed their magic in the style.css stylesheet file. Nowadays, you can change your theme colors in Customize.

But … 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 icon

For the 2-day 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. And you can begin to perform some styling magic on your own.

Related Posts

If you liked this post, you might also be interested in one of these.
How to Start a Blog in 5 easy Steps
Spring Cleaning for your WordPress website

Leave a Comment

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

Scroll to Top