Email Kit


As a core structure of Email Kit, color is used to establish hierarchy, emphasize elements and express your brand.

Paul Sylling

Color Palette

Email Kit draws inspiration from conventions established in other frameworks taking a simple and organized approach to applying color in your email. Although it comes with a default palette, the colors should be replaced to reflect your own brand and identity.


Replace these sample brand colors with your own.

Color Name Use Classes Properties
Blue Primary .*-primary Color: #007bff
Gray Secondary .*-secondary Color: #6c757d
Use these classes to represent your brand.

Replace these sample gray colors with your own.

Color Name Use Classes Properties
Black -- .*-black Color: #000000
Dark Gray -- .*-dark-gray Color: #343a40
Gray -- .*-gray Color: #6c757d
Light Gray -- .*-light-gray Color: #f8f9fa
White -- .*-white Color: #ffffff
Use these classes for shades of gray.

Replace these sample status colors with your own.

Color Name Use Classes Properties
Green Success .*-success Color: #28a745
Red Danger .*-danger Color: #dc3545
Yellow Warning .*-warning Color: #ffc107
Blue Info .*-info Color: #17a2b8
Use these classes to represent status.


Prepend any color name with bg- to apply that color to an element's background. Prepend any color name with text- to apply that color to an element's text.

Setting the headline text color to dark gray.


Follow these simple guidelines when applying color to your email.

  • Primary for call to action and brand elements
  • Accents for secondary colors
  • Light neutrals for email backgrounds
  • White for content panel backgrounds
  • Blue for links
  • Dark gray or black for text
  • Green for success
  • Yellow for warnings
  • Red for errors


When customizing the color palette to match your brand, Email Kit recommends complying with AA standard contrast ratios. Doing so ensures sufficient color contrast between elements in your email so that it is accessible to those with disabilities.

Best Practices

Follow these best practices when choosing color to create beautiful emails.

  • When adding colored text to a colored background, pay attention to the contrast level to make sure it is accessible for all.
  • Make your call-to-action elements stand out by using your primary brand color.

Frequently Asked Questions

Answers to common questions about color in Email Kit.

How do I replace the default palette with my own?

Replacing the defaults in Email Kit simply requires updating the hex values in the Color block of the CSS at the top of the email. After changing the colors, you’ll want to run your code through a CSS inline tool to update the markup.

What if I don’t have a secondary color?

Although Email Kit uses standard conventions for color, utilizing a secondary color is completely optional. If you want to use a secondary color but don’t have one, you can either lighten or darken your primary color.

What if I want to use multiple shades of the same color?

As an example, you can extend the primary color class (.*-primary-500) as the base and then lighten (.*-primary-300) or darken (.*-primary-700) as needed.

How do I know if my foreground and background colors pass the minimum level of WCAG accessibility?

You can check your colors combination by visiting this site.