In This Chapter:
❑ Different ways to define color in HTML
❑ Web Standard Color Names
❑ Color Values
❑ 16 Million Different Colors
❑ Shades of Gray
❑ Practical Examples
Different ways to define color in HTML:
You can configure color in HTML in a variety of ways:
1-Color name:
Using color name to define a color.
Example: blue.
2-Hexadecimal color value:
Using hexadecimal color notations.
Example: #00FF00
3-Decimal color value (RGB triplet).
Using RGB Triple color notation.
Example: RGB(00,255,0)
4-HSL (hue, saturation, and lightness)
Using a modern HSL color notation.
Example: hsl(240, 100%, 25%)
Next slides, you will see details and practical examples for each
way to define color.
Web Standard Color Names:
First, the World Wide Web Consortium (W3C) has listed 16 valid color
names for HTML and CSS:
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
Now a days, all modern browsers support more than 140 color names
that contains combination of two or more colors (example: YellowGreen,
PowderBlue, OrangeRed, MediumPurple, MediumSpringGreen, etc).
Note: If you want to use other colors, you should specify their HEX
values.
Hexadecimal and RGB Color Values:
- Hexadecimal (Hex) is a numbering system with base 16. It can be
used to represent large numbers with fewer digits.
- In this system there are 16 symbols or possible digit values from 0 to 9,
followed by six alphabetic characters: A, B, C, D, E and F.
Hexadecimal values can be ranges from 0 to F as below:
- Color in HTML can be defined using hex values:
Hex values are written as three double-digit numbers (#D 1 D 2 D 3)
starting with a # sign.
Examples on hex value:
#00FF00
#9ACD32
- Also, HTML colors can be defined using RGB (Red, Green, and
Blue).
- RGB use a combination of values for the main three light sources (red,
green, blue) in order define the needed color exactly.
RGB color value ranges from 0 to 255.
- The lowest value that can be given to one of the light sources is 0 (hex
00).
- The heights value that can be given to one of the light sources is 255
(hex FF).
- Example on hex value:
- RGB(0,255,0)
Color name Values (Hex and RGB):
COLOR COLOR HEX COLOR RGB
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Cyan #00FFFF rgb(0,255,255)
Magenta #FF00FF rgb(255,0,255)
Gray #C0C0C0 rgb(192,192,192)
White #FFFFFF rgb(255,255,255)
See RGB calculator:
[Link]
Try it yourself example:
<html>
<body>
<p style="background-color:#C0C0C0"> Color set by
using hex value
</p>
<p style="background-color:rgb(192,192,192)">
Color set by using rgb value
</p>
<p style="background-color:gray">
Color set by using color name
</p>
</body>
</html>
Shades of Gray:
Gray colors are displayed using an equal amount of power to all of the
light sources.
To make it easier for you to select the right gray color, we have compiled
the following table of gray shades:
Examples (Try it yourself):
1- Background Color.
You can set the background color for HTML elements:
<h1 style="background-color:Blue;"> Hello, this
heading back color is Blue
</h1>
<h2 style="background-color:Orange;">Orange</h2>
<p style="background-color:Tomato;"> this paragraph
back color is tomato </p>
Output:
2- Text Color.
You can set the color of text:
<h1 style="color:Blue;"> Hello, this heading back
color is Blue
</h1>
<h2 style="color:Orange;">Orange</h2>
<p style="color:Tomato;"> this paragraph back color
is tomato </p>
Output:
3- Set color by name, RGB, and Hexadecimal values:
<h1 style="background-color:red;"> red color by name
</h1>
<h1 style="background-color:rgb(255, 0, 0);"> red
color by rgb
</h1>
<h1 style="background-color: #FF0000;"> red color by
hex
</h1>
Output:
HSL:
Color can be defined using HSL notations.
W3C developed a new color notation called HSL (hue, saturation,
and lightness) as part of CSS3 to provide a more intuitive way to
describe color on web page
hue درجة اللون
saturation صفاء اللون
lightness اإلضاءة
- The hue is the actual color which is represented by numeric values
ranging from 0 to 360 (like the 360 degrees in a circle).
- Saturation is indicated by a percentage value
(full color saturation = 100% and gray = 0%).
- lightness is also indicated by percentage value
(normal color = 50%, white = 100%, and black = 0%).
Example:
hsl(240, 100%, 25%)
Usefull links:
[Link]
[Link]
Color Converter, RGB to HEX; convert RGB to HEX, HSB, HSL, CIELab ([Link])
Accessibility and Color:
Below tips is useful for and should be taken in to your considerations
when you design a web site:
- Color choices can be crucial. For example, red text on a blue
background as shown below is usually difficult for everyone to read.
- You have to choose text and background colors with enough
contrast so the text can be easily read.
- Colors in the web page should be compatible with the target
audience. Targeted audience can be only men/women, children,
young adults, or it can be everybody.
Color exercises:
In these exercises, we will use the 4 ways we learned for setting
colors to various html elements as below:
- Ways to define and set color:
1- Color name.
2- Hexadecimal value.
3- RGB value.
4- HSL value.
- HTML elements and color used:
1- HTML Body background and text colors.
Set color to all content of the web page using style attribute in
<body> tag.
Examples:
Using color name:
<body style="color: DarkRed;background-color: Beige ">
Using hex notations:
<body style="color: #8B0000;background-color: #FFE4C4;">
Using RGB notations:
<body style="color: rgb(139, 0, 0);background-color:rbg(255,228,196);">
Using HSL notations:
<body style="color: hsl(0,100%,20%);background-color:hsl(240, 0%,
50%);">
2- Heading background and text colors.
Set color to heading using style attribute in <H1> to <H6> tags.
Examples:
Using color name:
<h1 style="color:Gold;background-color: Gold;"> Hello, this
heading text color is gold and back color is dark red
</h1>
Using hex notations:
<h2 style="color: #FFD700;background-color: #FF0000;"> Hello,
this heading text color is gold and back color is dark red
</h2>
Using RGB notations:
<h2 style="color:rgb(255, 215, 0);background-color:
rgb(255,0,0);"> this heading text color is gold and back color is
dark red
</h2>
Using HSL notations:
<h1 style=" color: hsla(51, 100%, 50%);background-color: hsl(360,
100%, 50%);"> Hello, this heading text color is gold and back
color is dark red
</h1>
3- Table, table row, table cell background and text colors.
You can set background color of the table using bgcolor
attribute in <table> tag.
Example:
<table bgcolor="DarkOrange">
<table bgcolor="#FF8C00">
<table bgcolor="rgb(rgb(255, 140, 0)">
<table bgcolor="hsl(360, 1%, 100%)">
<tr bgcolor="#444444">
<th bgcolor="#444444">
<td bgcolor="#444444">
4- Textarea background and text colors.
You can sel text and back color for text area using
style="color” and style=" background-color”
Example:
<textarea name="myTextBox" cols="50" rows="5"
style="background-color:#FCF5D8;color:#AD8C08;">
Enter some text...
</textarea>
5- Image border color.
You can set borders and border color for an image using
style="border”
Example:
<img src="[Link]
[Link]" style="border: 10px solid green"/>