Custom Design » Custom Colors
Contents
- Getting Started
- Choose a Palette
- Change Colors
- Color Suggestions
- Color Picker
- Background Patterns
- Saving Changes
- Fun Facts
- Video
Related
Custom Colors is part of the Custom Design upgrade. It is designed to make it as simple as possible to update your blog’s color scheme with just a few clicks. You can use it to choose a color palette, swap colors with drag and drop, view color suggestions, refine with the color picker, and apply background patterns.
Getting Started
NEW! Custom Colors can now be previewed by anyone with our free themes. Just click the Try Now button while customizing.
Go to Appearance → Themes in your blog dashboard and click the Customize button for your current theme or Live Preview for any other theme to launch the customizer, click Try Now if you haven’t purchased the upgrade yet, then click on Colors & Backgrounds.
The Colors & Backgrounds menu only appears for themes with Custom Colors support. To find out if a theme has Custom Colors support, activate the theme and go to Appearance → Custom Design. There will be a note in the colors panel if the theme does not support Custom Colors.
If the theme you are customizing does not have Custom Colors support or if you don’t have the Custom Design upgrade, you will see separate menu items for Colors and Background Image instead of one combined Colors & Backgrounds menu item.
Choose a Palette
When you see a palette you’d like to try, just click on it to apply the colors to the live preview shown on the right. Click the Load more and Back buttons to scroll through all the available color palettes.
Color palettes are provided by COLOURlovers.
Change Colors
Adjust the current palette by using drag and drop to swap colors.
- The Undo button will revert back to the last saved state of colors.
- The Default button will revert back to the theme’s default colors.
To see which colors are mapped to which areas of your theme, hover over each color and the color role such as background, headings, links, or color accents will be revealed. The color roles vary for different themes.
Color Suggestions
Click each color in the color grid to view customized color suggestions.
Color Picker
To open the color picker, click on a color in the current palette and then click on the link that says pick your own color. The color picker has a safety net for accessibility. If you try to choose a link color that is too similar to the background color, the color picker will automatically add contrast to keep your text readable.
Each color on the web has a code. When a color is active, you can see its Hexadecimal color code such as #123456 just below the color picker. To insert your own color code, type into the field and press the tab key.
Background Patterns
Background patterns are loaded based on the background color of the last selected palette above. Click the Load more and Back buttons to scroll through all the available background patterns.
Backgrounds patterns are provided by COLOURlovers.
If the theme you are customizing has background image support built in, you will see the option to upload an image by dragging a file from your computer into the dashed outline or clicking select a file to browse images on your computer.
Background images you have uploaded yourself have repeat, position, and attachment options.
- Background Repeat determines if an image repeats or not—called tiling.
- Background Position controls where the first image is placed: left, center or right.
- Background Attachment is whether the image stays fixed in place when you scroll or if the background moves when you scroll.
Saving Changes
If you are previewing color changes before purchase, the save button in the customizer will save all of your changes, but only the Custom Design upgrade related changes will not appear live on your site until you purchase the upgrade.
If you have purchased the Custom Design upgrade for your blog, the save button will save your colors and apply them directly to your live blog.
Color palette and background pattern details appear in the footer credits links on blogs that have made updates using the Custom Design upgrade. Click on the theme name in your footer to see them.
Fun Facts
The color picker’s code name is Iris. Our themes have been setup with special color maps so each color can easily find its place. Not only that, color contrast is carefully calculated to make applying colors as easy as pie.
You don’t have to be a tetrachromat or have studied the intricacies of color theory like hue, chroma, saturation, value, tones, shades, and tints to find the perfect palette for your blog—but knowing a little bit about color theory could go a long way. Color evokes emotion, sets context, and has impact. Choose your colors with purpose!
