How to Customize the Colors of WordPress Twenty Seventeen

By Lisa Sabin-Wilson

After you explore WordPress Twenty Seventeen header-image settings, you may want to pick a background color or change the color of the header text. The default background color in the Twenty Seventeen theme is white, but you can change the color scheme. Here’s how:

  1. On the WordPress Dashboard, click the Customize link on the Appearance menu.

    The Customizer panel opens on the left side of your screen.

  2. Click the Colors link.

    The Customizing Colors screen opens.

  3. Select the Dark option to change your color scheme to a prebuilt dark palette.
  4. Select the Custom option to configure your own color.

    Selecting this option displays a color-palette bar.

  5. On the color bar, select your preferred color.

    Click anywhere on the color bar to set your preferred background color.

  6. Click the Select Color button in the Header Text Color section to change the color of the text that appears in your header.

    The Select Color button changes to Current Color after you click it to set the color value. You can click anywhere on the color palette that appears or type a six-digit hexadecimal code (hex code, for short) if you know your preferred color.

    Color values are defined in HTML and CSS by six-digit hexadecimal codes starting with the # sign, such as #000000 for black or #FFFFFF for white. (Adjusting hexadecimal colors is one of the easiest ways to tweak the colors in your theme for a new look.)

  7. When you finalize your selections, click the Save & Publish button.
    WordPress Twenty Seventeen Theme Colors
    The Twenty Seventeen theme’s color options.

The WordPress Customizer displays on the left side of your computer screen while a preview of your site displays on the right side. As you’re making changes in the Customizer, you see a preview of what changes those options make on your site so you can preview before you publish.