HTML Colors: How to add Color to your Web Page
Colors are applied to an HTML element using CSS. You can also pick which part of the element to apply color to.
We've just seen the various ways of applying styles to an HTML document. Some of those examples included adding color to the document. Seeing as color is a major part of any website design, let's look more closely at applying color to a web page.
Foreground color is used to change the color of an element's text.
Foreground color is specified like this
<h3 style="color:orange;">HTML Colors</h3>
Foreground color can also (indirectly) affect the color of other parts of the element, including its border.
This may or may not be the desired effect. However, it can always be overridden by explicitly specifying a color for the affected property.
Below is an example where a border is specified, along with its color.
border-color:olivedrab; from the styles, then click Run to see how it changes the color of the border.
Background color is specified like this:
<h3 style="background-color:yellow;">I have a background color.</h3>
We've already seen an example of specifying a color for an element's border (above). That's one way of specifying the various border properties.
You can also specify several border properties in one go (rather than separating them into different declarations). You can do this using the
border shortcut property, which allows you to specify the border's width, style, and color in one place.
Here's an example:
<h3 style="border:1px dashed orange;">I have a border color.</h3>
Embedded and External Styles
In the above examples, I used color names to specify the colors.
You can specify a color by its name (eg,
blue), its hexadecimal value (eg,
#0000ff), RGB value (eg
rgb(0,0,255)), or its HSL value (eg
Beginners may find it easier to specify colors by their color name, as color names are probably a lot easier to remember than the other options. Although color names are easier to remember, the hexadecimal, RGB, and HSL notations provide you with more color options.
Hexadecimal color codes are a combination of letters and numbers. The numbers go from 0 to 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you precede the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.
If you use graphics software, such as Adobe Photoshop or GIMP, you might be used to the RGB or HSL methods.
The chart below shows some examples of color names, along with their corresponding hexadecimal and RGB values.
|Color Name||Hex Code
|Color Name||Hex Code
This table is a small sample of the enormous range of colors available in HTML. To see more, check out HTML Color Codes.
You can make up your own colors by simply entering any six digit hexadecimal value (preceded by a hash).
In the following example, we specify the same color using three different methods. The resulting color is the same.
<h3 style="color:blue">Color Name</h3> <h3 style="color:#0000ff">Hexadecimal</h3> <h3 style="color:rgb(0,0,255)">RGB Value</h3>
If we wanted to change to a different shade of blue, we could change our value slightly like this:
<h3 style="color:steelblue;">Color Name</h3> <h3 style="color:#4682B4;">Hexadecimal</h3> <h3 style="color:rgb(70,130,180)">RGB Value</h3>
You can also use alpha to specify the level of opacity the color should have. This is only available on
HSL notations. To do this, add the letter "a" to the functional notation (i.e.
HSLA). For example,
rgba(0,0,255,0.5) results in a semi-transparent blue, as does
hsla(240, 100%, 50%, 0.5).
Here's an example of using RGBA to change the opacity.
<h3 style="background-color:rgba(0,0,255,1)">No transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.5)">Half transparancy</h3> <h3 style="background-color:rgba(0,0,255,0.1)">Lots of transparancy</h3>
Here's an example of using HSLA to change the opacity.
<h3 style="background-color:hsla(240, 100%, 50%, 1)">No transparancy</h3> <h3 style="background-color:hsla(240, 100%, 50%, 0.5)">Half transparancy</h3> <h3 style="background-color:hsla(240, 100%, 50%, 0.1)">Lots of transparancy</h3>
Choosing Colors - The Easy Way
By using hexadecimal, RGB, or HSL notation, you have a choice of over 16 million different colors. For example, you can start with
#000000 and increment by one value all the way up to
#FFFFFF. Each different value represents a slightly different color.
But don't worry — you won't need to remember every single hexadecimal color value! The HTML color picker and color chart make it easy for you to choose colors for your website.