Color Codes to Use for Titles or Dark Text

The chart below shows dark, rich colors, and their 6-digit hexadecimal codes, that are great for coloring text on a light background. Insert the 6-digit code anywhere in the HTML. Also, below the chart is a CSS class for each color to be used in a "div" or "span" to color text. You can copy and paste these classes into your Layout's HTML where the other classes are. (For example, .header … or .post).

To specify that a line or word of text should be given one of the colors below, use the "span" tag with one of the classes. If we want the words don't forget! to be highlighted in purple, use the "span" tag as follows: <span class="purple">don't forget!</span>

If you wanted the entire text of the post to be purple, the first line of your post must be <div class="purple"> …and the last line in the post </div>



We tried to use class names different than the other classes provided in the other three blogs regarding colors for your posts.

.brown {color:#30170F;}
.burgundy {color:#330000;}
.violet {color:#330033;}
.green {color:#003300;}
.purple {color:#330066;}
.blue {color:#000033;}
.teal {color:#003333;}
.gray {color:#333333;}
.wine {color:#5C0606;}
.black {color:#000000;}

Color Codes for Emphasizing Text in Posts

The chart below shows vivid, medium-dark colors very suitable for highlighting text. They are from the web-safe color palette. Insert the 6-digit code anywhere in the HTML. Also, below the chart is a CSS class for each color to be used in a "div" or "span" to color text. You can copy and paste these classes into your Layout's HTML where the other classes are. (For example, .header … or .post).

To specify that a line or word of text should be given one of the colors below, use the SPAN tag with one of the classes. If we want the words Don't forget! to be highlighted in red, use the SPAN tag as follows: <span class="red">Don't forget!</span>
If you wanted the entire text of the post to be red, the first line of your post must be <div class="red"> …and the last line in the post </div>


We tried to use class names different than the other classes provided in the other three blogs regarding colors for your posts.

.gold {color:#999900;}
.grass {color:#669900;}
.claret {color:#990033;}
.mint {color:#009933;}
.grape {color:#660099;}
.royal {color:#000099;}
.plum {color:#660066;}
.tan {color:#996600;}
.aqua {color:#009999;}
.red {color:#990000;}

Color Codes for VERY Light Colors to Use in Blog Posts

For bloggers who do not have access to software like Adobe Photoshop that provides the nexadecimal color code for any color, he or she is restricted to the web-safe color palette found in books or on the Internet. Unfortunately, the palette does not have any extremely light colors suitable for backgrounds.

The chart below shows the very lightest colors and their 6-digit code. Of course, the color white is #FFFFFF. Insert the 6-digit code anywhere in the HTML. Also, listed below is a CSS class for each color to be used as a background. You can copy and paste these classes into your Layout's HTML where the other classes are. (For example, .header … or .post).

To specify the background color of a particular post using the CSS classes, the first line of your post must be <div class="beige"> …and the last line in the post </div> - and then your post will have a background color.



If you don't plan on using the CSS classes from our other posts, feel free to name these classes anything you wish. Whatever name you choose (.name) - that is what you specify in the SPAN.


.beige {background-color:#FFFFF9;}
.light-pea {background-color:#FCFEF7;}
.light-pink {background-color:#FFF8F9;}
.light-mint {background-color:#F8FFFA;}
.light-violet {background-color:#FEF9FF;}
.light-royal {background-color:#F9F9FF;}
.light-teal {background-color:#F9FFFF;}
.light-orange {background-color:#FFFDFA;}
.light-blue {background-color:#F9FCFF;}
.light-green {background-color:#FCFFFA;}