Using colour selectors in the customizer

If you are lucky enough to have a theme that includes colour selectors from within the WordPress Customizer, you get the flexibility of having almost unlimited colours for whatever they are used for.

The Introduction to the Customizer tutorial, we briefly talked about the colour selector setting, so let’s go a bit further with this one.

If your theme offers colour settings, you can go to the “Colour” (Color) tab of the customizer. You will see something like this:

Colour Setting

When you click on the “Select Colour” button, you are then presented with this:

Colour Selector

The selector gives you a couple settings, one for the main colour and one for the saturation of the colour (represented by the vertical bar to the right). As you move the round O cursor, you will see the HEX colour value change in the box above the palette area while the colour next to the “Current Colour” label/button displays what it is.

The great thing about using the colour selectors, is that you can see the results in the preview window off to the right. When you are happy with the colour of whatever element you are changing, you can then click the “Save & Publish” button at the top of the customizer.

HEX Colours

HEX colours are the more common type used in websites and themes. Hexadecimal color values are also supported in all browsers, which is why they are the most commonly used method in HTML/CSS.

A hexadecimal color is specified with: #RRGGBB

As describes it, RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match