آموزش HTML بخش هفدهم :: استفاده از رنگها در HTML

در زبان HTML رنگها بر اساس ترکيب سه منبع نوري قرمز(Red)، سبز(Green) و آبي(Blue) تعريف ميشوند و هر منبع نوري شدتي بين 0 تا 255 را ميتواند داشته باشد. در اين استاندارد نور سفيد رنگي است حاصل از تداخل سه منبع نوري با شدت کامل يعني 255 و رنگ سياه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگي يا پيکسل بر روي صفحه مانيتور حاصل برخورد سه اشعه نوري قرمز، سبز و آبي ساخته شده توسط لامپ تصوير ميباشد.)

توجه داشته باشيد که مطابق تعريف ذکر شده امکان استفاده از 256 256 x 256 x يا حدود 16 ميليون (16,777,216) رنگ مختلف وجود داشته و در شناسه هاي مختلف به يکي از سه روش زير قادر به تعيين رنگ متن يا ناحيه اي خواهيد بود:
1-استفاده از مقادير شدت نور در مبناي 16 با فرمت #RRGGBB که RR، GG, BB مقادير مبناي شانزده نورهاي قرمز، سبز و آبي ميباشند.
2-استفاده از مقادير شدت نور در مبناي 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادير مبناي ده نورهاي قرمز، سبز و آبي ميباشند.
3-استفاده از نامهاي استاندارد رنگها مانند red ، green و ... مطابق جدول انتهائي اين صفحه

 
جدول زير حاوي جندين مثال و رنگ ترکيبي در مبناي ده و شانزده ميباشد:

Color مبناي 16 (Color HEX) مبناي 10 (Color RGB) نام رنگ
#000000 rgb(0,0,0) Black

#FF0000 rgb(255,0,0) Red

#00FF00 rgb(0,255,0) Lime

#0000FF rgb(0,0,255) Blue

#FFFF00 rgb(255,255,0) Yellow

#00FFFF rgb(0,255,255) Cyan

#FF00FF rgb(255,0,255) Fuchsia

#FFFFFF rgb(255,255,255) White

#C0C0C0 rgb(192,192,192) Silver



مثالهائي از نحوه استفاده از رنگها در اچتمل:

<p style="color:#FF00FF">Hello!</p> استفاده از مقدار در مبناي 16

<p style="color:rgb(255,0,255)">Hello!</p> استفاده از مقدار در مبناي 10

<p style="color:Fuchsia">Hello!</p> استفاده از نام رنگ

body{ color: #444400; } تعيين رنگ نوشته المان body در Style sheet ها

body{ background-color:#FFFFFF; } تعيين رنگ زمينه صفحه در Style sheet ها

HR { color : #EEEECC;} تعيين رنگ خطوط افقي در Style sheet ها

a:link {color:#c00B09;} تعيين رنگ پيوندها در Style sheet ها

p {color:Yellow;} تعيين رنگ متون پاراگرافها در Style sheet ها



جدول رنگهاي پايه HTML بر اساس مقادير هگز

#EEEEEE #DDDDDD #CCCCCC #BBBBBB #AAAAAA #999999
#888888 #777777 #666666 #555555 #444444 #333333
#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC3399 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF



جدول رنگهاي نامگذاري شده و مقادير معادل هگز آن به ترتيب حروف الفبا

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
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 Lightgreen
#90EE90 Lightgrey
#D3D3D3
Lightpink
#FFB6C1 Lightsalmon
#FFA07A Lightseagreen
#20B2AA
Lightskyblue
#87CEFA 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
#688E23
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
Wheat
#F5DEB3 White
#FFFFFF Whitesmoke
#F5F5F5
Yellow
#FFFF00 YellowGreen
#9ACD32