Choose your colors

Our theme designer allows you to customize your knowledge base colors. There are four main ways you can change your colors:

1. If you know the hex codes for the colors you'd like to use, or you're comfortable picking a close-enough color on a color wheel, you can click the color swatch next to the knowledge base color area you'd like to change and add the color.
2. You can extract a list of colors from a URL like your company website.
3. You can extract colors from an Image.
4. You can use one of our pre-built Palettes and iterate from that.

Each option is described in more detail below. See Color picker: Which colors control which parts of my theme? for more info on what each color swatch area controls.

Add individual colors directly

If you already have a list of hex codes you'd like to use from a brand or style guide, or you'd like to randomly pick colors from a color wheel:

1. Go to Settings > Style.
2. Be sure the Colors section is expanded.
3. Click the color swatch next to the color area you'd like to edit.
4. This will open a small pop-up with a color wheel and a hex code text box.
   
   • If you know the hex code, you can type or paste it into the box.
   • If you want to select from the color wheel, click in the wheel to select a general color. If you need to change the darkness of that color,  click in the color column immediately to the right of the wheel to adjust it.
5. Once you've added the hex code or made your color wheel selections, click anywhere outside of the pop-up to close it and see your changes in the Preview Pane.

Extract colors from a URL

If you'd like to pull in colors automatically from a website (like your company website, for example):

1. Go to Settings > Style.
2. Be sure the Colors section is expanded.
3. Select the URL option from the Or pick your colors from...section if it isn't already selected.
4. Add the URL you'd like to extract colors from in the Website URL to extract colors from box.
5. Select the Fetch Colors button.
   
6. If we're able to extract colors from that URL, you'll see a variety of color swatches displayed where the URL was. Drag those colors into the color area swatches above to update the theme's colors. The Preview Pane should automatically update as you make color changes.
   
   • If we aren't able to extract colors from that URL, you'll see a message letting you know of the failure.
     
7. Once you have your colors set the way you'd like, be sure to Save your changes!

Extract colors from an image

If you'd like to pull in colors automatically from an image (like a banner image, photograph, or picture of a color palette):

1. Go to Settings > Style.
2. Be sure the Colors section is expanded.
3. Select the Image option from the Or pick your colors from...section.
4. You can either drag the image file into the Drag an Image File Here section, or select the Or browse for your file link to open a File Explorer browse window to locate the file you'd like to upload.
   
5. Once you've added your images, a thumbnail of the image will display along with the colors extracted from it. Drag those colors into the color area swatches above to update the theme's colors. The Preview Pane should automatically update as you make color changes.
   
   • If you need to change the uploaded image to get a different set of swatches, select the New Image option located under the image thumbnail to start the process over again.
6. Once you have your colors set the way you'd like, be sure to Save your changes!

Use a pre-built color palette

If you don't have a set color palette you'd like to start with, or you just want to test out the functionality, you can choose from 10 pre-built palettes. To do so:

1. Go to Settings > Style.
2. Be sure the Colors section is expanded.
3. Select the Palettes option from the Or pick your colors from...section.
4. Once selected, a handful of palettes will appear.
5. Select an individual palette to see the Preview Pane and the color areas update.
   
6. Once you've found the palette you'd like to use, be sure to Save your changes.