Views
Help with Colors
Selecting Templates
Many templates in our system allow you to pick background and font colors. The examples that popup
for various templates show possible colors you can use for your email marketing and email
newsletters. Selecting colors is optional. Most templates start with the color fields empty,
which defaults to black text on a white background. These colors can be easily changed to match your
design needs in a matter of minutes.
Look for a template with the this icon when you click Create Newsletter to be able to select colors.
Colors in Templates
Templates that allow color selection include fields for setting colors named for the different
elements. These elements vary between templates. For example, the Content Corner Yoga
Newsletter template example features Template 9 with the following color selections:
- Page Background Color: #72765F (which looks like milk chocolate)
- Border Color: #FFFFFF (white, as bright possible)
- Article Background Colors: #D3C2AD (which might look like mocha or coffee with a lot of milk)
- Article Title Font Color: (left blank)
- Article Font Color: #003300 (which is an almost black very dark green)
- Article Link Font Color: #003300 (which is an almost black very dark green)
- Side Article Background Color: #AE8E6C (chocolate milk)
- Side Article Font Color: #FFFFFF (white, as bright possible)
- Table of Contents Title Font Color: #FFFFFF (white, as bright possible)
- Table of Contents Link Font Color: #003300 (which is an almost black very dark green)
These color selections are made in fields listed at the top of the Content Editor for this template. Some templates allow you to specify background, font, title, and link colors for each article. Templates that do not have Side Articles or Table of Contents don’t include fields for these elements and may have other elements that offer custom color choices.
Using the Color Picker
Fields that set color preferences in your email templates are followed by an icon that you can
click on to open a popup Color Picker.
In the Content Editor, this icon next to a color field opens a simple color picker. Click on the
desired color in the color picker popup to insert the hexadecimal code into the field and close
the color picker popup window.
In the Content Editor and in Content Options, this icon opens an advanced color picker. Using
the advanced color picker requires three clicks.
- Click (or drag) within the large square to select the brightness and saturation.
- Click (or drag) on the vertical slider to select the hue of the color.
- Click on the [x] button when you are done to close the color picker and insert the the hexadecimal code into the field.
Colors by Hexadecimal Code
Instead of using a color picker, you can also type or paste in the color by hexadecimal code (or
by name, see below). The hexadecimal code, which includes six “digits” which may be
any combination of 0-9 and A-F. The values are written in base-16 (hexadecimal), instead of the
base-10 we use everyday. This means that there are sixteen digits instead of ten, some of which
look like letters A through F.
Computer screens (as well as televisions) use a combination of red, green and blue colored phosphors (or liquid crystal cells) which may be made lighter or darker to create thousands or millions of different colors. The first two characters control the Red phophors. The middle two characters contol the Green phosphor. The last two characters control the Blue phosphors that make up each pixel (dot) on the computer screen. Each two-character combinations range from 00 (completely off) to FF (maximum brightness). The higher the value, the brighter the red, green, or blue phosphor.
By setting each of these to completely on or off, you can make the following colors:
| Color Name | Hexadecimal Code | Color |
|---|---|---|
| Black | #000000 | |
| Red | #FF0000 | |
| Lime | #00FF00 | |
| Blue | #0000FF | |
| Yellow | #FFFF00 | |
| Magenta | #FF00FF | |
| Cyan | #00FFFF | |
| White | #FFFFFF |
You can also use the values in between (see table below for examples).
<p>How the Hexadecimal Code Works
The HTML code for colors uses combinations of two characters as hexadecimal digits to represent
values from 0 to 255 for each phosphor (red, green, blue). Each two-character combinations range
from 00 (completely off) to FF (maximum brightness). The higher the value, the brighter the red,
green, or blue phosphor.
- 00 = 0 – the darkest value
- 01 = 1
- 02 = 2
- 03 = 3
- 04 = 4
- 05 = 5
- 06 = 6
- 07 = 7
- 08 = 8
- 09 = 9
- 0A = 10
- 0B = 11
- 0C = 12
- 0D = 13
- 0E = 14
- 0F = 15
- 10 = 16
- 11 = 17 (16 + 1)
- 12 = 18 (16 + 2)
- 13 = 19 (16 + 3)
- 14 = 20 (16 + 4)
- 15 = 21 (16 + 5)
- 16 = 22 (16 + 6)
- 17 = 23 (16 + 7)
- 18 = 24 (16 + 8)
- 19 = 25 (16 + 9)
- 1A = 26 (16 + 10)
- 1B = 27 (16 + 11)
- 1C = 28 (16 + 12)
- 1D = 29 (16 + 13)
- 1E = 30 (16 + 14)
- 1F = 31 (16 + 15)
- 20 = 32 (16 x 2)
- 21 = 33 (16 x 2 + 1)
- and so on until...
- EF = 239 (16 x 14 + 15)
- F0 = 240 (16 x 15)
- F1 = 241 (16 x 15 + 1)
- F2 = 242 (16 x 15 + 2)
- F3 = 243 (16 x 15 + 3)
- F4 = 244 (16 x 15 + 4)
- F5 = 245 (16 x 15 + 5)
- F6 = 246 (16 x 15 + 6)
- F7 = 247 (16 x 15 + 7)
- F8 = 248 (16 x 15 + 8)
- F9 = 249 (16 x 15 + 9)
- FA = 250 (16 x 15 + 10)
- FB = 251 (16 x 15 + 11)
- FC = 252 (16 x 15 + 12)
- FD = 253 (16 x 15 + 13)
- FE = 254 (16 x 15 + 14)
- FF = 255 (16 x 15 + 15) – the brightest value
Selecting Colors by Name
Although it’s not part of the official specification for HTML, all major web browsers support
the following 140 colors by name. This will work for most email recipients. When it doesn’t
work, the font color will default to black and the background will default to white, so no harm done.
If you need to match colors for corporate standards compliance, use the hexadecimal code instead
of the name.
| Color Name | Hexadecimal Code | Color |
|---|---|---|
| Black | #000000 | |
| Navy | #000080 | |
| DarkBlue | #00008B | |
| MediumBlue | #0000CD | |
| Blue | #0000FF | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| DarkTurquoise | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| Lime | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| MidnightBlue | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| ForestGreen | #228B22 | |
| SeaGreen | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| LimeGreen | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turquoise | #40E0D0 | |
| RoyalBlue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| SlateBlue | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| SlateGray | #708090 | |
| LightSlateGray | #778899 | |
| MediumSlateBlue | #7B68EE | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Aquamarine | #7FFFD4 | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| SkyBlue | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| BlueViolet | #8A2BE2 | |
| DarkRed | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| LightGreen | #90EE90 | |
| MediumPurple | #9370D8 | |
| DarkViolet | #9400D3 | |
| PaleGreen | #98FB98 | |
| DarkOrchid | #9932CC | |
| YellowGreen | #9ACD32 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| DarkGray | #A9A9A9 | |
| LightBlue | #ADD8E6 | |
| GreenYellow | #ADFF2F | |
| PaleTurquoise | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| PowderBlue | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| DarkKhaki | #BDB76B | |
| Silver | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Tan | #D2B48C | |
| LightGrey | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Thistle | #D8BFD8 | |
| Orchid | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Crimson | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plum | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavender | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Khaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| HoneyDew | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Wheat | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Salmon | #FA8072 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| OrangeRed | #FF4500 | |
| Tomato | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSalmon | #FFA07A | |
| Orange | #FFA500 | |
| LightPink | #FFB6C1 | |
| Pink | #FFC0CB | |
| Gold | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Moccasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| BlanchedAlmond | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Cornsilk | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | #FFFAF0 | |
| Snow | #FFFAFA | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| Ivory | #FFFFF0 | |
| White | #FFFFFF |
Colors will vary between computers due to screen types and user settings such as brightness, contrast, and gamma.
If you are looking for the highest consistency in colors, use the hexadecimal codes instead of names.
Contact Live Support
MyNewsletterBuilder is here to support you. If you are not finding the help you need through on-page help and this help directory, please contact us:
- Chat – Click the LiveSupport button, Monday through Thursday, 7 AM – 10 PM EST/EDT, and Friday, 7 AM – 9 PM EST/EDT
- We provide personal help through a Live Chat window on your computer screen.
- Our LiveSupport button is located in the top right corner of each web page.
- If the Live Chat system is busy or unavailable, your message will be sent by email.
- Phone – Call us at 828.232.0016, Monday through Thursday, 7 AM – 10 PM EST/EDT, and Friday, 7 AM – 9 PM EST/EDT
- Email – Send email to support@jbanetwork.com
- Web Form – Contact support using our Web-based Email Form
We provide Live Support 15 hours a day weekdays excluding major holidays. We also check support emails at night and over the weekend. Inquires received after 10 PM EST/EDT (after 9 PM EST/EDT on Fridays) are responded to via email as soon as we have answers to your questions.
Please include your name, username and contact information when you contact Live Support.
If the issue is related to a specific newsletter, please provide the name of the newsletter, the web browser version and the operating system (Windows Vista, for example), and a description of the steps to take to reproduce the issue. This small amount of information allows us to see what you are seeing and address your concerns as promptly as possible.
Yes, we provide Live Support for Free Trial customers. If you do not have an account with MyNewsletterBuilder, the best way to find out how easy it is to create your email marketing is to start your Free Trial today.