Changing Text Color in Posts Using Color Names

There are millions of colors one can use to style text in a blog or website. But you have to know the 6-digit hexadecimal code of the color. That is not a problem if you have software like Adobe Photoshop. But if you don't, you are limited to the 70 colors that Blogger provides in Compose mode.

By editing the HTML of your blog post and knowing a little HTML, you can specify any of 140 colors by name. And these colors are supported by all browsers. Check out the colors at the W3 School's HTML Color Names webpage.

Here are some examples of how you can use these color names. After writing your blog post in Compose mode, click Edit HTML and make the changes there. Just follow the directions precisely.


One way to put some variety into your blog is to use one of these 140 color names to make the text of a entire post a different color. Assume these two paragraphs are the entire blog post.

To make the text MediumBlue, at the beginning of the blog post type:
<div style="color:mediumblue">, and at the end of the post, type: </div>

If you want one just paragraph of your blog to be one of these 140 colors, you can use the paragraph tag. We've made this paragraph DarkCyan by using the paragraph tag. Insert your cursor at the beginning of the paragraph and type: <p style="color:darkcyan">. Then, make sure you type: </p> immediately after the end of the paragraph.


If we want one or more contiguous words to be a different color, we use the SPAN tag. It's easy. Even though this paragraph is "DarkRed," we wanted the name of this blog, The Blog Help Guide, to display in CornflowerBlue. So we typed <span style="color:cornflowerblue"> before the word The, and </span> after the word Guide.


We can have an entire bulleted list a different color, including the bullets, by modifying the UL tag.
  • The UL tag for this short list was modified
  • to read: <ul style="color:darkorange">

We can make each list item a different color by modifying the LI tags as follows:
  • The LI tag for this item is: <li style="color:slateblue">
  • The LI tag for this item is: <li style="color:firebrick">

We can modify the LI tags in an ordered list as well.
  1. The LI tag for this item is: <li style="color:teal">
  2. And the LI tag for this item is: <li style="color:fuchsia">

You get the idea!


If this post has been helpful, please consider linking to our blog or sharing!  Bookmark and Share

2 comments:

  1. What a fun little article. I don't have a blog, but help with a website. I think I can now make the webpages a bit more interesting.

    ReplyDelete