Overview
Opacity controls how transparent a color appears. Lower opacity makes a color more transparent. Higher opacity keeps the color more solid.
You can add opacity directly to a hex color code in Knak. This allows you to create overlays, subtle backgrounds, or layered design effects inside your assets.
How Opacity Works With Hex Colors
A standard hex color uses 6 characters.
Example:
#3366FF
To change opacity, add a two-character opacity value at the end of the hex code.
Example:
#3366FF80
This example applies 50% opacity to the color.
Demo
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 |
Important Email Client Limitation
Some email clients do not support opacity.
Microsoft Outlook for Windows does not support opacity values.
Outlook will automatically display the color as full opacity.
Use this feature carefully when designing email backgrounds or overlays.
Best Practices
Use 50–80% opacity for overlays or backgrounds.
Use 10–30% opacity for subtle design accents.
Test emails in Outlook Windows before sending.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.
*Important to note: The only downside for emails is Outlook Windows does not accept "opacity" and will revert back to the standard full color.
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% |
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com