Changing colors in your email template

Use the Design tab to customize the background, border, divider, text, link, and button colors for your entire template, or change colors within a section or block to make them stand out

Color is an important aspect of your email design, as the right color shows off your branding or helps convey the tone and mood of your email content. Colors can be changed globally throughout your entire template, or you can change the background colors of a layout/row, or text and buttons in an individual block to make them stand out further. If you create different sections in your email, you can also change the background and border colors within the section to highlight it:

• Change template background, border, and divider colors
• Change template text and link colors
• Change template button colors
• Change background and border colors in a section

Save time: Use our BrandKit to pull your logo and brand colors into your account automatically! Your colors are automatically added to all the color palettes for easy access while you're editing your campaigns.

Change template background, border, and divider colors

Using the Design tab to choose the colors for your backgrounds, borders, and dividers lets you apply them to your entire template. The styles you assign in the Design tab are applied to all the blocks and sections in your email template until you manually change them through a row's toolbar or through the customization options for a section.

1. Click the Design tab.
2. Expand the Backgrounds & borders section.
3. Click on the color swatch for the element you want to change. 
4. Place your cursor over a color in the palette to preview it within your template. Click on a color to select it, or click Advanced to enter a specific hex value.
   Design tip: If you want to match your brand colors exactly but aren't sure of the hex value, use a color picker, such as Color Cop or Color Schemer Online, to find them.
   
   
   
   

Additional background and border color options

Even if you've changed the global template colors on the Design tab, you can still change the background color of an individual block or the color of a divider to make it stand out from the rest. Keep in mind that once you apply a background color through a block's toolbar or the row menu (pictured below), the global colors on the Design tab no longer apply to it.

Did you know? In addition to changing your outer background color, you can add a background image to the outer background too.

Change template text and link colors

Using the Design tab to choose the colors for your text and links lets you apply them to your entire template.

1. Click the Design tab.
2. Expand the Fonts section.
3. Click on the color swatch for the element you want to change. 
4. Place your cursor over a color in the palette to preview it within your template. Click on a color to select it, or click Advanced to enter a specific hex value.
   Design tip: If you want to match your brand colors exactly but aren't sure of the hex value, use a color picker, such as Color Cop or Color Schemer Online, to find them.
   
   
   
   

Additional block-level text color options

Even if you've changed the global text colors on the Design tab, you can still change the color of specific text or links to stand out from the rest. Keep in mind that once you apply a text color or styles through a text block's toolbar (pictured below), the global colors on the Design tab no longer apply to it. The text block menu gives you additional editing options for things like aligning text and creating bulleted or numbered lists, too.

Change template button colors

Using the Design tab to choose the colors for your buttons lets you apply them to all the buttons in your template.

1. Click the Design tab.
2. Expand the Buttons section.
3. Click on the color swatch for the button. 
4. Place your cursor over a color in the palette to preview it within your template. Click on a color to select it, or click Advanced to enter a specific hex value.
   Design tip: If you want to match your brand colors exactly but aren't sure of the hex value, use a color picker, such as Color Cop or Color Schemer Online, to find them.
   
   
   
   

Additional block-level button color options

Even if you've changed the global button colors on the Design tab, you can still change the color of an individual button to make it stand out from the rest. Keep in mind that once you apply a color through the button's toolbar (top of the editor) or editing menu (left-hand side of the editor), the global colors on the Design tab no longer apply to it. Buttons also have additional editing options so you can apply things like borders and padding. 

Change background and border colors in a section

Each section in your email can have different colors applied to the backgrounds and borders. Keep in mind that once you apply a color through the section, the global colors on the Design tab no longer apply to it.

1. Place your cursor over the section you want to edit and click the pencil icon.
2. Expand the Width and backgrounds section and click the paint can icon to change the color of the Outer background or Inner background.
3. Place your cursor over a color in the palette to preview it within your template. Click on a color to select it, or click Advanced to enter a specific hex value.
   Design tip: If you want to match your brand colors exactly but aren't sure of the hex value, use a color picker, such as Color Cop or Color Schemer Online, to find them.
   
   
    
4. Expand the Borders section.
5. Click on the Color swatch. 
6. Place your cursor over a color in the palette to preview it within your template. Click on a color to select it, or click Advanced to enter a specific hex value.
   
   
    

Any links we provide from non-Constant Contact sites or information about non-Constant Contact products or services are provided as a courtesy and should not be construed as an endorsement by Constant Contact.

Questions?