This is a simple resource any blogger can use to add a dash of color to otherwise drab text (textual content) — especially for larger text, such as titles and subtitles, where color shows up better. Adding color to your titles, subtitles, etc. is quick and simple as long as your blogware allows you to edit in HTML view or mode; most platforms (e.g., WordPress) allow this. [ I get it; take me to the list of color codes ] [ Lighter colors for backgrounds ]

Here’s how you do it! (If it makes no sense, then read on… it’s explained simply.)
HTML code example for a red H3-level title:

<H3 style=”color:#FF0000″>

In general, virtually all blogging, website, coding, and programming platforms have two modes for editing content: A visually oriented mode and a coding-oriented, text-based mode.

WordPress allows users to create and edit content (for blog posts and pages) in either Visual mode or HTML mode. Most geeks, technically proficient, and power users prefer to edit in HTML mode. Most others probably use Visual mode, which is a type of content presentation often referred to as WYSIWYG (stands for What You See Is What You Get; pronounced wizzie-wig).

In HTML, headings, or headers – HTML terminology for what most would call a title or a subtitle – are indicated by being enclosed within "H" tags; therefore, the HTML code for a normal H1 heading title looks like this:

<H1>Title goes here</H1>

The above line of HTML code produces this:

Title goes here

The HTML code for a heading tag to display text in the color of your choice (for now, red) looks like this:

<H2 style=”color:#FF0000″> style=”color:#FF0000″>My red title</H2>

When the H2 code snippet above is displayed on a web page, it looks like this:

My red title

Here’s how you do it! HTML code example for a red H3-level title:

<H2 style=”color:#FF0000″>

Selected HTML color codes

Antique white 3: #CDC0B0
Azure 3: #C1CDCD
Bisque 3: #4A708B
Bisque 4: #8B7D6B
Burnt orange: #CD6600
Cadet blue 4: #53868B
Chocolate 4: color:#8B4513
Coral 3: color:#CD5B45
Coral 4: color:#4A708B
Cornsilk 3: color:#CDC8B1
Cornsilk 4: color:#8B8878
Cyan 4: color:#008B8B
Dark green: color:#006400
Dark olive green: color:#556B2F
Dark orange 4: color:#8B4500
Dark red: color:#8B0000
Dark salmon: color:#E9967A
Dark sea green: color:#8FBC8F
Dark sea green 4: color:#698B69
Dark slate blue: color:#483D8B
Dark slate gray: color:#2F4F4F
Dark slate gray 4: color:#528B8B
Deep sky blue 4: color:#00688B
Dodger blue 3: color:#1874CD
Firebrick: color:#B22222
Firebrick 4: color:#4A708B
Honeydew 3: color:#C1CDC1
Honeydew 4: color:#838B83
Indian red: color:#CD5C5C
Indian red 4: color:#8B3A3A
Lavender blush 3: color:#CDC1C5
Lavender blush 4: color:#4A708B
Light blue 3: color:#9AC0CD
Light blue 4: color:#68838B
Light cyan 3: color:#B4CDCD
Light cyan 4: color:#7A8B8B
Light salmon 3: color:#CD8162
Light salmon 4: color:#8B5742
Light sky blue 3: color:#8DB6CD
Sky blue 3: color:#6CA6CD
Light sky blue 4: color:#607B8B
Light steel blue 3: color:#A2B5CD
Sky blue 4: color:#4A708B
Light steel blue 4: color:#6E7B8B
Magenta 4: color:#8B008B
Maroon: color:#B03060
Medium orchid 3: color:#B452CD
Medium orchid 4: color:#7A378B
Medium purple 3: color:#8968CD
Medium purple 4: color:#5D478B
Medium sea green: color:#3CB371
Medium turquise: color:#48D1CC
Midnight blue: color:#191970
Misty rose 3: color:#CDB7B5
Misty rose 4: color:#8B7D7B
Navajo white 3: color:#CDB38B
Navajo white 4: color:#8B795E
Navy blue: color:#000080
Orange red 3: color:#CD3700
Orange red 4: color:#8B2500
Orchid 4: color:#8B4789
Pale green 3: color:#7CCD7C
Pale green 4: color:#548B54
Pale turquoise 3: color:#96CDCD
Pale turquoise 4: color:#668B8B
Pale violet red 3: color:#CD6889
Pale violet red 4: color:#8B475D
Peach puff 3: color:#CDAF95
Peach puff 4: color:#8B7765
Plum 3: color:#CD96CD
Plum 4: color:#8B668B
Purple 3: color:#7D26CD
Purple 4: color:#551A8B
Red: color:#FF0000
Red 2: color:#8B0000
Red 3: color:#CD0000
Red 4: color:#8B0000
Royal blue 3: color:#3A5FCD
Royal blue 4: color:#27408B
Salmon 3: color:#CD7054
Salmon 4: color:#8B4C39
Sea blue: color:#4A708B
Sky blue 4: color:#4A708B
Sea green: color:#2E8B57
Sea green 3: color:#43CD80
Sea green 4: color:#2E8B57
Seashell 3: color:#CDC5BF
Seashell 4: color:#8B8682
SGI light blue: color:#7D9EC0
SGI salmon: color:#C67171
SGI teal: color:#388E8E
Sienna: color:#A0522D
Sienna 2: color:#EE7942
Sienna 3: color:#CD6839
Sienna 4: color:#8B4726
Sky blue 3: color:#6CA6CD
Sky blue 4: color:#4A708B
Slate gray 2: color:#B9D3EE
Slate gray 3: color:#9FB6CD
Slate gray 4: color:#6C7B8B
Snow 3: color:#CDC9C9
Snow 4: color:#8B8989
Spring green 4: color:#008B45
Steel blue: color:#4682B4
Steel blue 3: color:#4F94CD
Steel blue 4: color:#36648B
Tan: color:#D2B48C
Thistle 2: color:#EED2EE
Thistle 3: color:#CDB5CD
Thistle 4: color:#8B7B8B
Tomato 2: color:#EE5C42
Tomato 3: color:#CD4F39
Tomato 4: color:#8B3626
Wheat 1: color:#FFE7BA
Wheat 2: color:#EED8AE
Wheat 3: color:#CDBA96
Wheat 4: color:#8B7E66

A few light colors; suitable background colors

Many of the above colors are light enough to serve well as background colors — perfect for sectioning off small sections of text, such as asides, notes, digressions, etc.; they are easily used with blockquotes. As above, many more suitable colors can be found on Somacon’s page of HTML color codes.

Antique white 1: #FAEBD7
Antique white 2: #FFEFDB
Antique white 3: #CDC0B0
Azure 1: #F0FFFF
Azure 2: #E0EEEE
Azure 3: #C1CDCD
Bisque 1: #FFE4C4
Bisque 2: #EED5B7
Bisque 3: #CDB79E
Cornsilk 1: #FFF8DC
Cornsilk 2: #EEE8CD
Cornsilk 3: #CDC8B1
Dark sea green 2: #B4EEB4
Dark sea green 3: #9BCD9B
White smoke: color:#F5F5F5
Yellow: color:#FFFF00

#FEE0C6

Curious? Additional details about headings, HTML, and CSS

Here are a few of the details which I omitted from the above explanation in order to keep things simple for everyone, to avoid getting too technical, etc.

HTML includes six (6) standard header sizes; from largest to smallest, they are H1 to H6. The next few lines are what the standard H1 to H6 headers look like on this blog:

H1 is the biggest.

This is an H2 heading.

Next is the H3 heading.

Then comes the H4 heading…

… followed by an H5 heading.

Last & least is the H6 heading.

If you are new to HTML, then the primary question at this point is probably something like this:

Where is the code with all the variables necessary for things like the font type (e.g., Arial, Franklin Gothic Book, Times New Roman, etc.), the font size (e.g., 10, 12, 14, etc.), the colors, what links look like and what happens when you click on them, the width of the website, etc.? When I use the browser’s feature to look at the original source code of a web page, I don’t see variables like BACKGROUND COLOR, FONT FACE, attributes of forms, and so much more… How do our web browsers know what colors and fonts to use?

That’s an excellent question which shall serve as the segue into CSS: the Cascading Style Sheet. For years now, the web standard has called for the separation of presentation and content.

Presentation: Appearance; just about anything having to do with the way a site or blog looks on the screen: background color, text color and size, font stack, link color, link action, width of the webpage, the attributes of the headers H1 to H6, etc.)

Content: The actual, bare-bones textual content; the words that comprise the content of a site or blog

In the old days, the content — PLUS all the hundreds or thousands of variables used to instruct the web browser how to render the content onto the screen (colors, fonts, widths, heights, etc.) was all mixed together to form an great big ugly mess of HTML code which could be very time-consuming to update. But now — with CSS — things are much better for the webmaster!

Resources: Add a dash of color to your blog content using colored text

• HTML Headings – W3 Schools
• How To Use H1-H6 HTML Elements Properly – Hobo – Perfect if you’d like to absorb the HTML heading lowdown via video!
• CSS Color Chart – Somacon – Excellent list; displays colors along with their HTML/CSS codes… Excerpt: This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palettes with either HTML or CSS. Click on the color code to select it, then you can copy and paste it. Click on the Toggle button to convert from Hex to RGB and back. The charts are printed in tabular fashion so you can narrow your browser window with the palette and compare the colors to your design side-by-side.
• Semantic uses of HTML heading tags –
  Semantic User Interface best practices: Guidelines for developing quality user interfaces
• HTML Beginner Tutorial – HTML Dog: The best practice guide to XHTML and CSS – This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS. It should be quite easy to follow if you work through each step, which are all brought together at the end, before moving on to the CSS Beginner Tutorial.
• CSS Beginner Tutorial – Like our HTML Beginner Tutorial, this CSS Beginner Tutorial assumes that you know NOTHING: that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites. The purpose of this guide is to teach the bare essentials – just enough to get started. The CSS Intermediate Tutorial and CSS Advanced Tutorial go into more depth about CSS.
• How to use HTML color codes – HTML Color Codes
• The simple theory behind HTML color codes; understanding HTML color codes & how they work

Removed content

<H1 style=”color:#6C7B8B”>

Thursday, April 19, 2012