This blog post is the sixth in a series of blogs for those who would like to know more about what is going on behind the scenes and try some basic HTML coding for themselves. Once you learn the basics of coding, you will find that it opens up many possible options for your content formatting.

We highly recommend that you start with the first post in the series if you are new to HTML coding. If you have not read the first post in this topic, you can find it here:

Basic HTML Coding Options for WordPress

 

bigstock_d_color_wheel_12181583

Today we look into the world of color for your text. Consider the following section of code:

<p style=”color: #FF0033;”>This text will be a red color. </p>

We know that the “<p>” tag indicates the paragraph. It has the ‘style=””’attribute which tells the browser how to display the text. Using the style attribute in this way is called an “inline” style. Within the quotes of the style attribute, you see the code that designates your text “color:”.

Now we come to the fun hexadecimal color value. It looks trickier than it really is. Color values for the web always start with a # sign. After the # you have a 6 digit code. To accommodate for all the color values, there is a 16 digit value scale 0-F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Each digit represents a color tone on that scale with “0” being very little color/darker and “F” being a lot of color/lighter.

The 6 digit code corresponds to an RGB color system. You can think of it like this #RRGGBB. The first 2 digits are red. The second 2 digits are green. The third 2 digits are blue. You replace the R’s, G’s and B’s with the values from the color scale 0-F as mentioned above.

So, our example color (#FF0033;) would be bright red, no green, and little to no blue. It ends up being a brighter red color.

A great resource to help you pick your color can be found here: http://www.w3schools.com/tags/ref_colorpicker.asp

You can also do a web search for “hexadecimal color picker” and find many resources to help you find your color.

Share this post:
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInEmail this to someone