Our theme designer allows you to customize your knowledge base colors. There are four main ways you can change your colors:
- 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, select the color swatch next to the knowledge base color area you'd like to change and add the color. Refer to Add individual colors directly for more information.
- Extract a list of colors from a URL like your company website. Refer to Extract colors from a URL for more information.
- Extract colors from an Image. Refer to Extract colors from an image
- Don't have any colors or sources handy? Use one of our starter Palettes and iterate from that. Refer to Use a starter color palette.
Each option is described in more detail below. Refer to 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:
- Go to Customize > Style (HTML & CSS).
- Expand the Colors section in the left menu.
- Select the color swatch next to the color area you'd like to edit.
- A color selection modal opens with a color wheel and a hex code text box.
- If you know the hex code, type or paste it into the box.
- If you want to select from the color wheel, select anywhere in the wheel to select a general color. If you need to change the darkness of that color, select the color column immediately to the right of the wheel to adjust it.
- Once you've added the hex code or made your color wheel selections, select anywhere outside of the color selection modal to close it and review 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):
- Go to Customize > Style (HTML & CSS).
- Expand the Colors section in the left menu.
- Select the URL option from the Or pick your colors from... section if it isn't already selected.
- Add the URL you'd like to extract colors from in the Website URL to extract colors from box.
- Select Fetch Colors.
- 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.
Sample gif showing the above steps. Hover to play.- If we aren't able to extract colors from that URL, a message displays you know of the failure.
- 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):
- Go to Customize > Style (HTML & CSS).
- Expand the Colors section in the left menu.
- Select the Image option from the Or pick your colors from... section.
- 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.
- 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.
- Once you have your colors set the way you'd like, be sure to Save your changes!
Use a starter 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, choose from ten starter palettes. To do so:
- Go to Customize > Style (HTML & CSS).
- Expand the Colors section in the left menu.
- Select the Palettes option from the Or pick your colors from... section.
- Once selected, a handful of palettes will appear.
- Select an individual palette to see the Preview Pane and the color areas update.
- Once you've found the palette you'd like to use, be sure to Save your changes.
