Overview
Opacity controls how see-through a color appears. Lower opacity makes a color more transparent. Higher opacity keeps the color more solid.
You can add opacity to a hex color code in the Knak editor. This lets you create overlays, subtle backgrounds, or layered design effects in your assets.
Limited Email Client Support
Not every email client supports opacity. These email clients do not support opacity:
Outlook for Windows (desktop and Office 365)
Windows 10 Mail
Yahoo! Mail
AOL Mail
Web.de
GMX.de
When Outlook for Windows finds a color with opacity, it may:
Ignore the color completely.
Show the color as black or white.
Show other display issues.
Think of opacity as a progressive enhancement. This means it adds a nice extra look in clients that support it. Your email should still look good and be easy to read in clients that do not.
Before you use opacity:
Make sure your email still works if the color does not show. Do not use opacity on anything your reader needs, like text, buttons, or key messages.
Check that any text near or on top of the color is still easy to read without it.
Test your email in the clients your audience uses most, including Outlook for Windows.
Litmus testing found that colors with opacity are not supported in Outlook for Windows and several other email clients. To learn more, read Litmus’s guide: The Best Way to Code HTML Email Background Colors and Gradients.
How Opacity Works With Hex Colors
A standard hex color uses 6 characters.
Example: #3366FF
To change opacity, add a 2-character opacity value at the end of the hex code.
Example: #3366FF80
This example applies 50% opacity to the color.
How To Apply Opacity
Enter the 6-character hex color code for your base color.
Add a 2-character opacity code at the end.
Example:
Color | Opacity | Resulting Code |
#014739 | 100% | #014739 |
#014739 | 50% | #01473980 |
#014739 | 25% | #01473940 |
Hex Code Capacity Chart
Here is a chart with the hex codes and the color strength percentage! Try these codes out to help customize your assets further!
Hex Code | Percentage |
FF | 100% |
F2 | 95% |
E6 | 90% |
D9 | 85% |
CC | 80% |
BF | 75% |
B3 | 70% |
A6 | 65% |
99 | 60% |
8C | 55% |
80 | 50% |
73 | 45% |
66 | 40% |
59 | 35% |
4D | 30% |
40 | 25% |
33 | 20% |
26 | 15% |
1A | 10% |
0D | 5% |
00 | 0% |
Where Opacity Works
Opacity can only be added in the Knak editor. Enter an 8-character hex code in a color field to add opacity to that element.
Opacity is not available in Brand Settings. You cannot add opacity to a color in a Color Kit. Gradients are also not available in Color Kits.
Where you set the color | Opacity supported? |
Color fields in the editor | Yes |
Color Kits in Brand Settings | No |
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.