Color
As a core structure of Email Kit, color is used to establish hierarchy, emphasize elements and express your brand.
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.
Brand
Replace these sample brand colors with your own.
| Color | Name | Use | Classes | Properties |
| Blue | Primary | .*-primary | Color: #007bff | |
| Gray | Secondary | .*-secondary | Color: #6c757d |
Grays
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 |
Status
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 |
Modifiers
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.Guidelines
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
Accessibility
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.
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.
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.
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.
You can check your colors combination by visiting this site.
