کد رنگ در html و css

در طراحی سایت اگر کدهای html یا CSS رو نگاه کرده باشید ، در قسمت هایی که برای تنظیم رنگ متن ، پس زمینه ، حاشیه و … وجود داره معمولا رنگ رو با یک کد خاص به کار بردند . چیزی شبیه rrggbb# . امروز می خوایم به صورت کامل و مفصل در مورد نام و کد رنگ ها در زبان های html و CSS صحبت کنیم . :: معمولا رنگ ها رو به سه طریف در میون کدهای html و css استفاده می کنند . این سه شیوه رو براتون در جدول زیر آوردم :

 

شیوه استفادهمثالتوضیح
استفاده از نام رنگblack سیاه red قرمزاز ۱۴۷ نام رنگ تعریف شده در CSS و Html استفاده می شود
استفاده از کد ترکیبی (عدد دهدهی)rgb(0,0,0) سیاه rgb(255,0,0) قرمزدر این روش از کد رنگ به صورت (rgb(r,g,b است که r و g و b به ترتیب شدت رنگ های قرمز ، سبز و آبی را نشان می دهند و که هر کدام مقادیری بین ۰ تا ۲۵۵ را می توانند بپذیرند و هر چه عدد انتخاب شده بیشتر باشد شدت آن رنگ در ترکیب قرمز سبز آبی رنگ بیشتر است .
استفاده از کد ترکیبی (عدد مبنای ۱۶)#۰۰۰۰۰۰ سیاه #FF0000 قرمزدر این روش که بدلیل کوتاه و ساده بودن کد رنگ بیشترین استفاده رو داره رنگ به صورت rrggbb# نشان داده می شود و تنها تفاوت آن با روش قبل استفاده از اعداد مبنای ۸ (HexaDecimal) به جای اعداد دهدهی است . که rr و gg و bb به ترتیب مقدار عددی شدت رنگ های قرمز ، سبز و آبی رو نشون میده و مقادیر هگزادسیمال بین ۰۰ تا FF که معادل همون ۰ تا ۲۵۵ دهدهی هست رو میتونه بگیره .

 

نکته در مورد اعداد مبنای ۱۶ یا همون Hexadecimal :: رقم های اعداد مبنای r ، از ۰ هستند تا r-1 . مثلا در مبنای پرکاربرد ۱۰ که روزانه ازش استفاده می کنید ، رقم ها ۰ تا ۹ هستند . و مبنای ۱۶ دارای ارقام ۰ تا ۱۵ هست . برا اینکه ابهامی در خوندن اعداد مبنای ۱۶ پیش نیاد ، رقم های ۱۰ تا ۱۵ رو در مبنای ۱۶ با حروف الفبای لاتین از A تا F نشون میدن . اگر اینکار صورت نمی گرفت در خواندن اعداد مبنای ۱۶ ابهامات زیادی بود . مثلا عدد ۱۱۲ رو به سه شکل می شد تفسیر کرد . اینکه از سه رقم ۱ و ۱ و ۲ ایجاد شده یا از دو رقم ۱۱ و ۲ و یا اینکه از دو رقم ۱ و ۱۲ !!! وقتی از حروف به جای ارقام بزرگتر از ۹ در مبنای ۱۶ استفاده کنیم این سه تفسیر رو به صورت سه عدد ۱۱۲ و B2 و ۱C داریم که اعداد کاملا واضح و مشخصی در سیستم مبنای ۱۶ هستند . :: پس شانزده رقم مبنای ۱۶ عبارتند از ۰ , ۱ , ۲ , ۳ , ۴ , ۵ , ۶ , ۷ , ۸ , ۹ , F , E , D , C , B , A

:: برای اینکه بیشتر آشنا بشید در جدول زیر چند رنگ معروف رو با سه روش گفته شده آوردم . خوب دقت کنید که چطور کدها با ترکیب سه رنگ قرمز و سبز و آبی ساخته شدند :

رنگکد رنگ HEXکد رنگ RGB
#۰۰۰۰۰۰rgb(0,0,0)
#FF0000rgb(255,0,0)
#۰۰FF00rgb(0,255,0)
#۰۰۰۰FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#۰۰FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)

 

به طور مثال در جدول فوق کد رنگ مشکی ۰۰۰۰۰۰# هست . یعنی هیچ رنگی موجود نیست (سیاهی !) . و وقتی که همه ی رنگ ها مقدارشون حداکثر باشه سفید (FFFFFF#) رو داریم !

:: نام های استاندارد تعریف شده برای رنگ ها در CSS و HTML برای تعداد ‍۱۴۷ رنگ در CSS و HTML نام استاندارد تعریف شده که اونها رو با رنگ و کد معادلشون در زیر می بینید :

نام رنگHEX Codeرنگ
AliceBlue#F0F8FF
AntiqueWhite#FAEBD7
Aqua#۰۰FFFF
Aquamarine#۷FFFD4
Azure#F0FFFF
Beige#F5F5DC
Bisque#FFE4C4
Black#۰۰۰۰۰۰
BlanchedAlmond#FFEBCD
Blue#۰۰۰۰FF
BlueViolet#۸A2BE2
Brown#A52A2A
BurlyWood#DEB887
CadetBlue#۵F9EA0
Chartreuse#۷FFF00
Chocolate#D2691E
Coral#FF7F50
CornflowerBlue#۶۴۹۵ED
Cornsilk#FFF8DC
Crimson#DC143C
Cyan#۰۰FFFF
DarkBlue#۰۰۰۰۸B
DarkCyan#۰۰۸B8B
DarkGoldenRod#B8860B
DarkGrey#A9A9A9
DarkGreen#۰۰۶۴۰۰
DarkKhaki#BDB76B
DarkMagenta#۸B008B
DarkOliveGreen#۵۵۶B2F
Darkorange#FF8C00
DarkOrchid#۹۹۳۲CC
DarkRed#۸B0000
DarkSalmon#E9967A
DarkSeaGreen#۸FBC8F
DarkSlateBlue#۴۸۳D8B
DarkSlateGrey#۲F4F4F
DarkTurquoise#۰۰CED1
DarkViolet#۹۴۰۰D3
DeepPink#FF1493
DeepSkyBlue#۰۰BFFF
DimGrey#۶۹۶۹۶۹
DodgerBlue#۱E90FF
FireBrick#B22222
FloralWhite#FFFAF0
ForestGreen#۲۲۸B22
Fuchsia#FF00FF
Gainsboro#DCDCDC
GhostWhite#F8F8FF
Gold#FFD700
GoldenRod#DAA520
Grey#۸۰۸۰۸۰
Green#۰۰۸۰۰۰
GreenYellow#ADFF2F
HoneyDew#F0FFF0
HotPink#FF69B4
IndianRed#CD5C5C
Indigo#۴B0082
Ivory#FFFFF0
Khaki#F0E68C
Lavender#E6E6FA
LavenderBlush#FFF0F5
LawnGreen#۷CFC00
LemonChiffon#FFFACD
LightBlue#ADD8E6
LightCoral#F08080
LightCyan#E0FFFF
LightGoldenRodYellow#FAFAD2
LightGrey#D3D3D3
LightGreen#۹۰EE90
LightPink#FFB6C1
LightSalmon#FFA07A
LightSeaGreen#۲۰B2AA
LightSkyBlue#۸۷CEFA
LightSlateGrey#۷۷۸۸۹۹
LightSteelBlue#B0C4DE
LightYellow#FFFFE0
Lime#۰۰FF00
LimeGreen#۳۲CD32
Linen#FAF0E6
Magenta#FF00FF
Maroon#۸۰۰۰۰۰
MediumAquaMarine#۶۶CDAA
MediumBlue#۰۰۰۰CD
MediumOrchid#BA55D3
MediumPurple#۹۳۷۰D8
MediumSeaGreen#۳CB371
MediumSlateBlue#۷B68EE
MediumSpringGreen#۰۰FA9A
MediumTurquoise#۴۸D1CC
MediumVioletRed#C71585
MidnightBlue#۱۹۱۹۷۰
MintCream#F5FFFA
MistyRose#FFE4E1
Moccasin#FFE4B5
NavajoWhite#FFDEAD
Navy#۰۰۰۰۸۰
OldLace#FDF5E6
Olive#۸۰۸۰۰۰
OliveDrab#۶B8E23
Orange#FFA500
OrangeRed#FF4500
Orchid#DA70D6
PaleGoldenRod#EEE8AA
PaleGreen#۹۸FB98
PaleTurquoise#AFEEEE
PaleVioletRed#D87093
PapayaWhip#FFEFD5
PeachPuff#FFDAB9
Peru#CD853F
Pink#FFC0CB
Plum#DDA0DD
PowderBlue#B0E0E6
Purple#۸۰۰۰۸۰
Red#FF0000
RosyBrown#BC8F8F
RoyalBlue#۴۱۶۹E1
SaddleBrown#۸B4513
Salmon#FA8072
SandyBrown#F4A460
SeaGreen#۲E8B57
SeaShell#FFF5EE
Sienna#A0522D
Silver#C0C0C0
SkyBlue#۸۷CEEB
SlateBlue#۶A5ACD
SlateGrey#۷۰۸۰۹۰
Snow#FFFAFA
SpringGreen#۰۰FF7F
SteelBlue#۴۶۸۲B4
Tan#D2B48C
Teal#۰۰۸۰۸۰
Thistle#D8BFD8
Tomato#FF6347
Turquoise#۴۰E0D0
Violet#EE82EE
Wheat#F5DEB3
White#FFFFFF
WhiteSmoke#F5F5F5
Yellow#FFFF00
YellowGreen#۹ACD32

 

کد رنگ در html و css