HTML Colors
|
|
Introduction
|
|
These are the colors used in the Html Here colors
are defined using a hexadecimal notation for the combination
of Red, Green, and Blue color values (RGB). The lowest value that can be
given to one light source is 0 (hex #00). The highest value is 255
(hex #FF).
|
|
We write the Hex color using six bits, as HEX color code of
black color is #000000. Hex color code is the combination of Red, Green,
Blue (RGB) colors. First two zero's in the code represents the Red
color, third & fourth zero's represents the Green color and fifth &
sixth zero's represents the Blue color. 'F' is the maximum value of
each zero. Hence if want the HEX color code of red color then just make the
write the the maximum value of the zero's representing the Red color. i.e Hex
color code for red color is #FF0000. Similarly you can create the HEX
color code for Green & Blue also.
|
|
To use these colors in your HTML page you will have to
simply select the color which you like then note down it's Hex color
code or RGB color code and write this color code in your
page color attribute.
|
Different Color Review
|
|
This table shows the result of combining Red, Green, and Blue light
sources:
|
|
Color
|
Color
HEX
|
Color
RGB
|
|
#000000
|
rgb(0,0,0)
|
|
#FF0000
|
rgb(255,0,0)
|
|
#00FF00
|
rgb(0,255,0)
|
|
#0000FF
|
rgb(0,0,255)
|
|
#FFFF00
|
rgb(255,255,0)
|
|
#00FFFF
|
rgb(0,255,255)
|
|
#FF00FF
|
rgb(255,0,255)
|
|
#C0C0C0
|
rgb(192,192,192)
|
|
#FFFFFF
|
rgb(255,255,255)
|
|
|
|
More Colors
|
This 216 cross platform web safe color palette was
originally created to ensure that all computers would display
all colors correctly when running a 256 color palette.
|
|
000000
|
000033
|
000066
|
000099
|
0000CC
|
0000FF
|
003300
|
003333
|
003366
|
003399
|
0033CC
|
0033FF
|
006600
|
006633
|
006666
|
006699
|
0066CC
|
0066FF
|
009900
|
009933
|
009966
|
009999
|
0099CC
|
0099FF
|
00CC00
|
00CC33
|
00CC66
|
00CC99
|
00CCCC
|
00CCFF
|
00FF00
|
00FF33
|
00FF66
|
00FF99
|
00FFCC
|
00FFFF
|
330000
|
330033
|
330066
|
330099
|
3300CC
|
3300FF
|
333300
|
333333
|
333366
|
333399
|
3333CC
|
3333FF
|
336600
|
336633
|
336666
|
336699
|
3366CC
|
3366FF
|
339900
|
339933
|
339966
|
339999
|
3399CC
|
3399FF
|
33CC00
|
33CC33
|
33CC66
|
33CC99
|
33CCCC
|
33CCFF
|
33FF00
|
33FF33
|
33FF66
|
33FF99
|
33FFCC
|
33FFFF
|
660000
|
660033
|
660066
|
660099
|
6600CC
|
6600FF
|
663300
|
663333
|
663366
|
663399
|
6633CC
|
6633FF
|
666600
|
666633
|
666666
|
666699
|
6666CC
|
6666FF
|
669900
|
669933
|
669966
|
669999
|
6699CC
|
6699FF
|
66CC00
|
66CC33
|
66CC66
|
66CC99
|
66CCCC
|
66CCFF
|
66FF00
|
66FF33
|
66FF66
|
66FF99
|
66FFCC
|
66FFFF
|
990000
|
990033
|
990066
|
990099
|
9900CC
|
9900FF
|
993300
|
993333
|
993366
|
993399
|
9933CC
|
9933FF
|
996600
|
996633
|
996666
|
996699
|
9966CC
|
9966FF
|
999900
|
999933
|
999966
|
999999
|
9999CC
|
9999FF
|
99CC00
|
99CC33
|
99CC66
|
99CC99
|
99CCCC
|
99CCFF
|
99FF00
|
99FF33
|
99FF66
|
99FF99
|
99FFCC
|
99FFFF
|
CC0000
|
CC0033
|
CC0066
|
CC0099
|
CC00CC
|
CC00FF
|
CC3300
|
CC3333
|
CC3366
|
CC3399
|
CC33CC
|
CC33FF
|
CC6600
|
CC6633
|
CC6666
|
CC6699
|
CC66CC
|
CC66FF
|
CC9900
|
CC9933
|
CC9966
|
CC9999
|
CC99CC
|
CC99FF
|
CCCC00
|
CCCC33
|
CCCC66
|
CCCC99
|
CCCCCC
|
CCCCFF
|
CCFF00
|
CCFF33
|
CCFF66
|
CCFF99
|
CCFFCC
|
CCFFFF
|
FF0000
|
FF0033
|
FF0066
|
FF0099
|
FF00CC
|
FF00FF
|
FF3300
|
FF3333
|
FF3366
|
FF3399
|
FF33CC
|
FF33FF
|
FF6600
|
FF6633
|
FF6666
|
FF6699
|
FF66CC
|
FF66FF
|
FF9900
|
FF9933
|
FF9966
|
FF9999
|
FF99CC
|
FF99FF
|
FFCC00
|
FFCC33
|
FFCC66
|
FFCC99
|
FFCCCC
|
FFCCFF
|
FFFF00
|
FFFF33
|
FFFF66
|
FFFF99
|
FFFFCC
|
FFFFFF
|
|
|
|
More Colors+
|
|
Color Name
|
Color HEX
|
Color
|
AliceBlue
|
#F0F8FF
|
|
AntiqueWhite
|
#FAEBD7
|
|
Aqua
|
#00FFFF
|
|
Aquamarine
|
#7FFFD4
|
|
Azure
|
#F0FFFF
|
|
Beige
|
#F5F5DC
|
|
Bisque
|
#FFE4C4
|
|
Black
|
#000000
|
|
BlanchedAlmond
|
#FFEBCD
|
|
Blue
|
#0000FF
|
|
BlueViolet
|
#8A2BE2
|
|
Brown
|
#A52A2A
|
|
BurlyWood
|
#DEB887
|
|
CadetBlue
|
#5F9EA0
|
|
Chartreuse
|
#7FFF00
|
|
Chocolate
|
#D2691E
|
|
Coral
|
#FF7F50
|
|
CornflowerBlue
|
#6495ED
|
|
Cornsilk
|
#FFF8DC
|
|
Crimson
|
#DC143C
|
|
Cyan
|
#00FFFF
|
|
DarkBlue
|
#00008B
|
|
DarkCyan
|
#008B8B
|
|
DarkGoldenRod
|
#B8860B
|
|
DarkGray
|
#A9A9A9
|
|
DarkGreen
|
#006400
|
|
DarkKhaki
|
#BDB76B
|
|
DarkMagenta
|
#8B008B
|
|
DarkOliveGreen
|
#556B2F
|
|
Darkorange
|
#FF8C00
|
|
DarkOrchid
|
#9932CC
|
|
DarkRed
|
#8B0000
|
|
DarkSalmon
|
#E9967A
|
|
DarkSeaGreen
|
#8FBC8F
|
|
DarkSlateBlue
|
#483D8B
|
|
DarkSlateGray
|
#2F4F4F
|
|
DarkTurquoise
|
#00CED1
|
|
DarkViolet
|
#9400D3
|
|
DeepPink
|
#FF1493
|
|
DeepSkyBlue
|
#00BFFF
|
|
DimGray
|
#696969
|
|
DodgerBlue
|
#1E90FF
|
|
Feldspar
|
#D19275
|
|
FireBrick
|
#B22222
|
|
FloralWhite
|
#FFFAF0
|
|
ForestGreen
|
#228B22
|
|
Fuchsia
|
#FF00FF
|
|
Gainsboro
|
#DCDCDC
|
|
GhostWhite
|
#F8F8FF
|
|
Gold
|
#FFD700
|
|
GoldenRod
|
#DAA520
|
|
Gray
|
#808080
|
|
Green
|
#008000
|
|
GreenYellow
|
#ADFF2F
|
|
HoneyDew
|
#F0FFF0
|
|
HotPink
|
#FF69B4
|
|
IndianRed
|
#CD5C5C
|
|
Indigo
|
#4B0082
|
|
Ivory
|
#FFFFF0
|
|
Khaki
|
#F0E68C
|
|
Lavender
|
#E6E6FA
|
|
LavenderBlush
|
#FFF0F5
|
|
LawnGreen
|
#7CFC00
|
|
LemonChiffon
|
#FFFACD
|
|
LightBlue
|
#ADD8E6
|
|
LightCoral
|
#F08080
|
|
LightCyan
|
#E0FFFF
|
|
LightGoldenRodYellow
|
#FAFAD2
|
|
LightGrey
|
#D3D3D3
|
|
LightGreen
|
#90EE90
|
|
LightPink
|
#FFB6C1
|
|
LightSalmon
|
#FFA07A
|
|
LightSeaGreen
|
#20B2AA
|
|
LightSkyBlue
|
#87CEFA
|
|
LightSlateBlue
|
#8470FF
|
|
LightSlateGray
|
#778899
|
|
LightSteelBlue
|
#B0C4DE
|
|
LightYellow
|
#FFFFE0
|
|
Lime
|
#00FF00
|
|
LimeGreen
|
#32CD32
|
|
Linen
|
#FAF0E6
|
|
Magenta
|
#FF00FF
|
|
Maroon
|
#800000
|
|
MediumAquaMarine
|
#66CDAA
|
|
MediumBlue
|
#0000CD
|
|
MediumOrchid
|
#BA55D3
|
|
MediumPurple
|
#9370D8
|
|
MediumSeaGreen
|
#3CB371
|
|
MediumSlateBlue
|
#7B68EE
|
|
MediumSpringGreen
|
#00FA9A
|
|
MediumTurquoise
|
#48D1CC
|
|
MediumVioletRed
|
#C71585
|
|
MidnightBlue
|
#191970
|
|
MintCream
|
#F5FFFA
|
|
MistyRose
|
#FFE4E1
|
|
Moccasin
|
#FFE4B5
|
|
NavajoWhite
|
#FFDEAD
|
|
Navy
|
#000080
|
|
OldLace
|
#FDF5E6
|
|
Olive
|
#808000
|
|
OliveDrab
|
#6B8E23
|
|
Orange
|
#FFA500
|
|
OrangeRed
|
#FF4500
|
|
Orchid
|
#DA70D6
|
|
PaleGoldenRod
|
#EEE8AA
|
|
PaleGreen
|
#98FB98
|
|
PaleTurquoise
|
#AFEEEE
|
|
PaleVioletRed
|
#D87093
|
|
PapayaWhip
|
#FFEFD5
|
|
PeachPuff
|
#FFDAB9
|
|
Peru
|
#CD853F
|
|
Pink
|
#FFC0CB
|
|
Plum
|
#DDA0DD
|
|
PowderBlue
|
#B0E0E6
|
|
Purple
|
#800080
|
|
Red
|
#FF0000
|
|
RosyBrown
|
#BC8F8F
|
|
RoyalBlue
|
#4169E1
|
|
SaddleBrown
|
#8B4513
|
|
Salmon
|
#FA8072
|
|
SandyBrown
|
#F4A460
|
|
SeaGreen
|
#2E8B57
|
|
SeaShell
|
#FFF5EE
|
|
Sienna
|
#A0522D
|
|
Silver
|
#C0C0C0
|
|
SkyBlue
|
#87CEEB
|
|
SlateBlue
|
#6A5ACD
|
|
SlateGray
|
#708090
|
|
Snow
|
#FFFAFA
|
|
SpringGreen
|
#00FF7F
|
|
SteelBlue
|
#4682B4
|
|
Tan
|
#D2B48C
|
|
Teal
|
#008080
|
|
Thistle
|
#D8BFD8
|
|
Tomato
|
#FF6347
|
|
Turquoise
|
#40E0D0
|
|
Violet
|
#EE82EE
|
|
VioletRed
|
#D02090
|
|
Wheat
|
#F5DEB3
|
|
White
|
#FFFFFF
|
|
WhiteSmoke
|
#F5F5F5
|
|
Yellow
|
#FFFF00
|
|
YellowGreen
|
#9ACD32
|
|
|
|
|
Shades of Red
|
|
Red Light
|
HEX
|
RGB
|
|
#000000
|
rgb(0,0,0)
|
|
#080000
|
rgb(8,0,0)
|
|
#100000
|
rgb(16,0,0)
|
|
#180000
|
rgb(24,0,0)
|
|
#200000
|
rgb(32,0,0)
|
|
#280000
|
rgb(40,0,0)
|
|
#300000
|
rgb(48,0,0)
|
|
#380000
|
rgb(56,0,0)
|
|
#400000
|
rgb(64,0,0)
|
|
#480000
|
rgb(72,0,0)
|
|
#500000
|
rgb(80,0,0)
|
|
#580000
|
rgb(88,0,0)
|
|
#600000
|
rgb(96,0,0)
|
|
#680000
|
rgb(104,0,0)
|
|
#700000
|
rgb(112,0,0)
|
|
#780000
|
rgb(120,0,0)
|
|
#800000
|
rgb(128,0,0)
|
|
#880000
|
rgb(136,0,0)
|
|
#900000
|
rgb(144,0,0)
|
|
#980000
|
rgb(152,0,0)
|
|
#A00000
|
rgb(160,0,0)
|
|
#A80000
|
rgb(168,0,0)
|
|
#B00000
|
rgb(176,0,0)
|
|
#B80000
|
rgb(184,0,0)
|
|
#C00000
|
rgb(192,0,0)
|
|
#C80000
|
rgb(200,0,0)
|
|
#D00000
|
rgb(208,0,0)
|
|
#D80000
|
rgb(216,0,0)
|
|
#E00000
|
rgb(224,0,0)
|
|
#E80000
|
rgb(232,0,0)
|
|
#F00000
|
rgb(240,0,0)
|
|
#F80000
|
rgb(248,0,0)
|
|
#FF0000
|
rgb(255,0,0)
|
|
|
|
Shades of Gray
|
|
|
RGB(0,0,0)
|
#000000
|
|
RGB(8,8,8)
|
#080808
|
|
RGB(16,16,16)
|
#101010
|
|
RGB(24,24,24)
|
#181818
|
|
RGB(32,32,32)
|
#202020
|
|
RGB(40,40,40)
|
#282828
|
|
RGB(48,48,48)
|
#303030
|
|
RGB(56,56,56)
|
#383838
|
|
RGB(64,64,64)
|
#404040
|
|
RGB(72,72,72)
|
#484848
|
|
RGB(80,80,80)
|
#505050
|
|
RGB(88,88,88)
|
#585858
|
|
RGB(96,96,96)
|
#606060
|
|
RGB(104,104,104)
|
#686868
|
|
RGB(112,112,112)
|
#707070
|
|
RGB(120,120,120)
|
#787878
|
|
RGB(128,128,128)
|
#808080
|
|
RGB(136,136,136)
|
#888888
|
|
RGB(144,144,144)
|
#909090
|
|
RGB(152,152,152)
|
#989898
|
|
RGB(160,160,160)
|
#A0A0A0
|
|
RGB(168,168,168)
|
#A8A8A8
|
|
RGB(176,176,176)
|
#B0B0B0
|
|
RGB(184,184,184)
|
#B8B8B8
|
|
RGB(192,192,192)
|
#C0C0C0
|
|
RGB(200,200,200)
|
#C8C8C8
|
|
RGB(208,208,208)
|
#D0D0D0
|
|
RGB(216,216,216)
|
#D8D8D8
|
|
RGB(224,224,224)
|
#E0E0E0
|
|
RGB(232,232,232)
|
#E8E8E8
|
|
RGB(240,240,240)
|
#F0F0F0
|
|
RGB(248,248,248)
|
#F8F8F8
|
|
RGB(255,255,255)
|
#FFFFFF
|
|
|
So now you can easily have too many colors on your web page.
HTML Lists
|
|
Introduction
|
|
|
In HTML there are three types of
list ordered, unordered and definition lists. With the name itself you
might be understanding that what is list. Yes you are thinking in the right
way.
|
|
It is the list of anything e.g. list of items, list of books.
|
|
Hope now you are clear about the List element of
the HTML. Now the question is that, can you create the list of items
in the web page? Certainly not, But do not worry with the help of this
small chapter you can create any type of lists on the your web page very
easily. And it will take few of your minutes to learn. So lets Begain!
|
Unordered Lists
|
|
An unordered list is a list of items. The list items
are marked with bullets (typically small black circles), it does
not have numbers in the list.
An unordered list starts with the <ul> tag
and end with </ul>. list items are defined in
between <ul> & </ul>. Each list item is
surrounded by the <li> & </li> tag.
|
|
<ul> tag is used for unordered list.
Between <ul> & </ul> you have to enter
list of items.
|
|
<li> tag is used for list item. Each list item is
surrounded by <li> & </li> tag.
|
|
|
Format:
|
<ul>
<li> item1 </li> <li> item2 </li> .......<li>
itemn </li></ul>
|
|
Example
|
Output
|
<ul>
<li>Text Book</li><li>Note Book</li>
<li>Pen</li><li>Pencil</li>
</ul>
|
- Text
Book
- Note
Book
- Pen
- Pencil
|
|
|
Just write/copy this example inside the body of
the HTML file and save the file and open in the browser and see
how it looks.
|
|
So now you have learned how to create
the unordered list in the web page.
|
Ordered List
|
|
An ordered list is also a list of items. The list
items are marked with numbers not with the bullets.
|
|
An ordered list starts with
the <ol> tag and end with </ol>. list items are
defined in between <ol> & </ol>. Each list
item is surrounded by
the <li> & </li> tag.
|
|
<ol> tag is used for ordered list.
Between <ol> & </ol> you have to enter
list of items.
|
|
<li> tag is used for list item. Each list item is
surrounded by <li> & </li> tag.
|
|
|
Format:
|
<ol>
<li> item1 </li> <li> item2 </li> .......<li>
itemn </li></ol>
|
|
Example
|
Output
|
<ol>
<li>Text Book</li><li>Note Book</li>
<li>Pen</li><li>Pencil</li>
</ol>
|
- Text
Book
- Note
Book
- Pen
- Pencil
|
|
|
Just write/copy this example inside the body of
the HTML file and save the file and open in the browser and see
how it looks.
|
|
So now you have learned how to create
the ordered list in the web page. More over if you are
looking for more options then you can have list
containing Roman numbers, alphabets in the list instead
of numbers (1,2,3...n). Ordered list have an attribute
called type="value".
|
|
And you know how to define the attribute of any
element inside it. type attribute have different values.
|
|
|
Format:
|
<ol
type="value"> <li> item1 </li> <li> item2
</li> .......<li> itemn </li></ol>
|
|
Attribute
|
Value
|
Description
|
type
|
A
a
I
i
1
|
Specifies
ordered list containing capital alphabets.
Specifies ordered list containing small alphabets.
Specifies ordered list containing big Roman alphabets.
Specifies ordered list containing Small Roman alphabets.
Specifies ordered list containing numbers.
|
|
Definition List
|
|
A definition list is not a list of items. This is a list
of terms and explanation of the terms. A definition list starts
with the <dl> tag. Each definition-list term
starts with the <dt> tag.
Each definition-list definition starts with
the <dd> tag.
Inside a definition-list definition
(the <dd> tag) you can put paragraphs, line breaks,
images, links, other lists, etc.
|
|
<dl> tag is used for definition list.
Between <dl> & </dl> you have to
enter list of items.
|
|
<dt> tag is used for list item terms. Each list item is
surrounded by <dt> & </dt> tag.
|
|
<dd> tag is used for
the definition-list definition.
|
|
|
Format:
|
<dl>
<dt> Term1 </dt> <dd> Term definition.<dd>
.......<dt> itemn </dt>....</dl>
|
|
Example
|
Output
|
<dl>
<dt>Books</dt>
<dd>Books are the great friends.</dd>
<dt>Pen</dt>
<dd>Pen is the biggest power</dd>
</dl>
|
Books
Books
are the great friends.
Pen
Pen
is the biggest power
|
|
|
Just write/copy this example inside the body
of the HTML file and save the file and open in the browser and
see how it looks.
|
|
So now you have learned how to create the ordered list in
the web page. Now you have done a lot in the list now you saw how
simple list are.
|
|
|
|
|
|
Comments
Post a Comment