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!

System Color Picker: a free Mac Color Picker

colornote icon

For our WordPress Made Easy, we recommend you install —from the App Store—this free utility called System Color Picker. It can be used in any application on your computer not just a specific browser.

Using Color Picker:

  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 pick it up.
  4. Now click the circle and move your mouse pointer around your screen the color picker will detect the Hex color number
  5. Click and the color picker stores the hex code to your clipboard.
  6. You will need to copy and paste to add it to an element on your page or post.
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 WordPress Made Easy online course, 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.
The Best WordPress Social Sharing Plugin
Free Tools for building an online store with WordPress WooCommerce

Leave a Comment

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

Scroll to Top