آموزش کار با رنگ ها یا Colors در HTML

اسفند ۲۴, ۱۳۹۸
ارسال شده توسط:
162 بازدید
۰

سلام و دورود میکنم خدمت تمام دوستان و همراهان همیشگی وب سایت سون ریپلای در جلسه از آموزش html css میخواهیم آموزش کار با رنگ ها یا Colors در HTML خدمت شما عزیزان آموزش بدیم پس تا آخر باما همراه باشید .

در طراحی صفحات html در موارد زیادی همچون تعیین رنگ پس زمینه ، رنگ فونت های متن و …
می توانیم از رنگ های مختلف استفاده کنیم . برای تعیین یک رنگ مشخص در html ،
سه روش وجود دارد که در ادامه هر یک را شرح خواهیم داد .

آموزش کار با رنگ ها یا Colors در HTML

از رنگها توسط سه شیوه RGB و HEX و Name می توان استفاده کرد. مثلا هر سه دستور زیر رنگ پس زمینه را به سیاه تغییر خواهند داد.

  • <body bgcolor=”#۰۰۰۰۰۰″>
  • <body bgcolor=”rgb(0,0,0)”>
  • <body bgcolor=”black”>

در استفاده از رنگها بهتر است از شیوه Name استفاده نکنید و دو شیوه دیگر را به کار ببرید چون نام رنگها برای همه مرورگرها قابل استفاده نمی باشد.
توسط دستور rgb می توانید تا ۱۶ میلیون رنگ بسازید یعنی ۲۵۶×۲۵۶×۲۵۶ . نمونه ای از نام رنگها و شماره های آنها را در جدول بعد می بینید.

کار با رنگ ها یا Colors در HTML

رنگ متن‌ها را در اچ تی ام ال به دو شکل می‌توان تعیین کرد. در حالت اول, رنگ نوشته‌ها را با رنگ‌های پیش فرض (مثلا blue، yellow یا …) مشخص می‌کنند.
در این حالت انتخاب‌ها به رنگ‌های از پیش تعریف شده محدود می‌شود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آن‌ها در کنار علامت # استفاده کنید.
مثلا ۸۸۸۸۸۸# رنگ سفید یا FF330A# رنگ نارنجی است.
برای به دست آوردن کد رنگ‌ها می‌توانید از نرم افزارهای گرافیکی همچون فوتوشاپ یا سرویس‌های آنلاین همچون HTML Color یا HTML Color picker استفاده نمایید.

کدهگزادسیمال

کدهگزادسیمال رنگ ها در طراحی وب یا به انگلیسی Hexadecimal

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

بیشتر بخوانید :
داستان بسیار زیبای مادر

طبق این روش، به هر رنگ، یک کد می‌تونیم اختصاص بدیم. کد هر رنگ، تلفیقی از رنگ های قرمز، سبز و آبی هست و به فرم کلی rrggbb# نشون داده میشه.
بازه هر رنگ از ۰۰ تا ff ادامه داره و روشنایی و تاریکی هر رنگ رو تنظیم می‌کنه.

یک مثال از کدها و رنگ های تولید شده به کد های زیر دقت نمایید.

نام فارسی HEX کد رنگ کد رنگ RGB نمونه رنگ
نیلی کمرنگ #E6E6FA rgb(230,230,250)
بادمجانی روشن #D8BFD8 rgb(216,191,216)
بنفش کدر #DDA0DD rgb(221,160,221)
بنفش روشن #EE82EE rgb(238,130,238)
سرخابی #FF00FF rgb(255,0,255)
ارکیده #DA70D6 rgb(218,112,214)
ارکیده سیر #BA55D3 rgb(186,85,211)
آبی بنفش #۹۳۷۰DB rgb(147,112,219)
آبی فولادی #۶A5ACD rgb(106,90,205)
آبی-بنفش سیر #۸A2BE2 rgb(138,43,226)
بنفش باز #۹۴۰۰D3 rgb(148,0,211)
ارکیده بنفش #۹۹۳۲CC rgb(153,50,204)
مخملی #۸B008B rgb(139,0,139)
بنفش #۸۰۰۰۸۰ rgb(128,0,128)
آبی دودی #۴۸۳D8B rgb(72,61,139)
نیلی سیر #۴B0082 rgb(75,0,130)

به نکته زیر توجه کنید و خوب اون رو به خاطر بسپارید:

یک رنگ از ۲۵۵ قسمت تشکیل شده، هرچی ۲۵۵ کمتر شه رنگ تاریک‌تر و هرچی بیشتر شه رنگ روشن‌تر میشه

هگز (HEX) استانداردی از طیف های رنگی بر مبنای عدد ۱۶ (Hexadecimal) است که مقادیر آن از ترکیب اعداد ۰-۹ و حروف A, B, C, D, E, F تشکیل شده و در وب کاربردهای زیادی دارد،
مخصوصا در استایل نویسی با خاصیت های CSS، هر کد و ترکیب اعداد و حروف در این سیستم نمایانگر یک رنگ استاندارد است،
به طور مثال عدد ۰۰۰۰۰۰ رنگ مشکی و حروف FFFFFF رنگ سفید را نشان می دهند.

کار با رنگ ها یا Colors در HTML مدل رنگ آر جی بی ( RGB )

 

RGB در واقع مخفف سه رنگ اصلی قرمز، سبز و آبی (Red, Green, Blue) است و در اصطلاح به استانداردی گفته می شود که برای نمایش رنگ های مختلف در دستگاه های الکترونیکی نظیر مانیتورها کاربرد دارد،
در این سیستم از ترکیب مقادیر سه رنگ اصلی قرمز، سبز و آبی، برای ایجاد یک رنگ جدید استفاده می شود،
مقادیر هر رنگ نیز می تواند بین ۰ (تیره) تا ۲۵۵ (روشن) در نوسان باشد،
RGB موارد استفاده فراوانی دارد، از جمله در کارهای گرافیکی، برنامه نویسی و…

بیشتر بخوانید :
آموزش ساخت بسته نصب آسان وردپرس با dupliucator +فیلم

در این آموزش کار با رنگ ها یا Colors در HTML مفهوم تعیین رنگ را آشنا شدیم و همچنین متوجه شدیم که مقادیر پیش فرض چه مقادیری هستند و چگونه می‌توانیم از آن ها استفاده کنیم.

همچنین با کد رنگ های مبنای ۱۶ یا HEX نیز آشنا شدیم و متوجه شدیم که چگونه تعریف می‌شوند و در چه مواردی از آن‌ ها استفاده می‌شود.

شما می‌توانید در رابطه با دیگر روش های تعیین رنگ در فصل چهارم یعنی فصل رنگ ها بیشتر بخوانید.

در پایان هم یک تعداد رنگ که توسط کد های Hexadecimal و rgb تولید شده است را خدمت شما قرار دادم میتوایند استفاده لازم را ببرید هر گونه نظر یا پیشنهادی داشته باشید توی قسمت نظرات سایت برای من بنیسید.

آموزش کار با رنگ ها

تعداد ۱۴۰ رنگ در CSS و HTML نام استاندارد تعریف شده که تمام مرورگرهای مدرن از این نام رنگ ها پشتیبانی می کنند. کلیه ۱۴۰ رنگ همراه با نام و مقادیر HEX و RGB در جدول زیر قابل مشاهده هستند.

 

Color RGB Code HEX Code Color Name
rgb(240,248,255) #F0F8FF AliceBlue
rgb(250,235,215) #FAEBD7 AntiqueWhite
rgb(0,255,255) #۰۰FFFF Aqua
rgb(127,255,212) #۷FFFD4 Aquamarine
rgb(240,255,255) #F0FFFF Azure
rgb(245,245,220) #F5F5DC Beige
rgb(255,228,196) #FFE4C4 Bisque
rgb(0,0,0) #۰۰۰۰۰۰ Black
rgb(255,235,205) #FFEBCD BlanchedAlmond
rgb(0,0,255) #۰۰۰۰FF Blue
rgb(138,43,226) #۸A2BE2 BlueViolet
rgb(165,42,42) #A52A2A Brown
rgb(222,184,135) #DEB887 BurlyWood
rgb(95,158,160) #۵F9EA0 CadetBlue
rgb(127,255,0) #۷FFF00 Chartreuse
rgb(210,105,30) #D2691E Chocolate
rgb(255,127,80) #FF7F50 Coral
rgb(100,149,237) #۶۴۹۵ED CornflowerBlue
rgb(255,248,220) #FFF8DC Cornsilk
rgb(220,20,60) #DC143C Crimson
rgb(0,255,255) #۰۰FFFF Cyan
rgb(0,0,139) #۰۰۰۰۸B DarkBlue
rgb(0,139,139) #۰۰۸B8B DarkCyan
rgb(184,134,11) #B8860B DarkGoldenRod
rgb(169,169,169) #A9A9A9 DarkGray
rgb(169,169,169) #A9A9A9 DarkGrey
rgb(0,100,0) #۰۰۶۴۰۰ DarkGreen
rgb(189,183,107) #BDB76B DarkKhaki
rgb(139,0,139) #۸B008B DarkMagenta
rgb(85,107,47) #۵۵۶B2F DarkOliveGreen
rgb(255,140,0) #FF8C00 DarkOrange
rgb(153,50,204) #۹۹۳۲CC DarkOrchid
rgb(139,0,0) #۸B0000 DarkRed
rgb(233,150,122) #E9967A DarkSalmon
rgb(143,188,143) #۸FBC8F DarkSeaGreen
rgb(72,61,139) #۴۸۳D8B DarkSlateBlue
rgb(47,79,79) #۲F4F4F DarkSlateGray
rgb(47,79,79) #۲F4F4F DarkSlateGrey
rgb(0,206,209) #۰۰CED1 DarkTurquoise
rgb(148,0,211) #۹۴۰۰D3 DarkViolet
rgb(255,20,147) #FF1493 DeepPink
rgb(0,191,255) #۰۰BFFF DeepSkyBlue
rgb(105,105,105) #۶۹۶۹۶۹ DimGray
rgb(105,105,105) #۶۹۶۹۶۹ DimGrey
rgb(30,144,255) #۱E90FF DodgerBlue
rgb(178,34,34) #B22222 FireBrick
rgb(255,250,240) #FFFAF0 FloralWhite
rgb(34,139,34) #۲۲۸B22 ForestGreen
rgb(255,0,255) #FF00FF Fuchsia
rgb(220,220,220) #DCDCDC Gainsboro
rgb(248,248,255) #F8F8FF GhostWhite
rgb(255,215,0) #FFD700 Gold
rgb(218,165,32) #DAA520 GoldenRod
rgb(128,128,128) #۸۰۸۰۸۰ Gray
rgb(128,128,128) #۸۰۸۰۸۰ Grey
rgb(0,128,0) #۰۰۸۰۰۰ Green
rgb(173,255,47) #ADFF2F GreenYellow
rgb(240,255,240) #F0FFF0 HoneyDew
rgb(255,105,180) #FF69B4 HotPink
rgb(205,92,92) #CD5C5C IndianRed
rgb(75,0,130) #۴B0082 Indigo
rgb(255,255,240) #FFFFF0 Ivory
rgb(240,230,140) #F0E68C Khaki
rgb(230,230,250) #E6E6FA Lavender
rgb(255,240,245) #FFF0F5 LavenderBlush
rgb(124,252,0) #۷CFC00 LawnGreen
rgb(255,250,205) #FFFACD LemonChiffon
rgb(173,216,230) #ADD8E6 LightBlue
rgb(240,128,128) #F08080 LightCoral
rgb(224,255,255) #E0FFFF LightCyan
rgb(250,250,210) #FAFAD2 LightGoldenRodYellow
rgb(211,211,211) #D3D3D3 LightGray
rgb(211,211,211) #D3D3D3 LightGrey
rgb(144,238,144) #۹۰EE90 LightGreen
rgb(255,182,193) #FFB6C1 LightPink
rgb(255,160,122) #FFA07A LightSalmon
rgb(32,178,170) #۲۰B2AA LightSeaGreen
rgb(135,206,250) #۸۷CEFA LightSkyBlue
rgb(119,136,153) #۷۷۸۸۹۹ LightSlateGray
rgb(119,136,153) #۷۷۸۸۹۹ LightSlateGrey
rgb(176,196,222) #B0C4DE LightSteelBlue
rgb(255,255,224) #FFFFE0 LightYellow
rgb(0,255,0) #۰۰FF00 Lime
rgb(50,205,50) #۳۲CD32 LimeGreen
rgb(250,240,230) #FAF0E6 Linen
rgb(255,0,255) #FF00FF Magenta
rgb(128,0,0) #۸۰۰۰۰۰ Maroon
rgb(102,205,170) #۶۶CDAA MediumAquaMarine
rgb(0,0,205) #۰۰۰۰CD MediumBlue
rgb(186,85,211) #BA55D3 MediumOrchid
rgb(147,112,219) #۹۳۷۰DB MediumPurple
rgb(60,179,113) #۳CB371 MediumSeaGreen
rgb(123,104,238) #۷B68EE MediumSlateBlue
rgb(0,250,154) #۰۰FA9A MediumSpringGreen
rgb(72,209,204) #۴۸D1CC MediumTurquoise
rgb(199,21,133) #C71585 MediumVioletRed
rgb(25,25,112) #۱۹۱۹۷۰ MidnightBlue
rgb(245,255,250) #F5FFFA MintCream
rgb(255,228,225) #FFE4E1 MistyRose
rgb(255,228,181) #FFE4B5 Moccasin
rgb(255,222,173) #FFDEAD NavajoWhite
rgb(0,0,128) #۰۰۰۰۸۰ Navy
rgb(253,245,230) #FDF5E6 OldLace
rgb(128,128,0) #۸۰۸۰۰۰ Olive
rgb(107,142,35) #۶B8E23 OliveDrab
rgb(255,165,0) #FFA500 Orange
rgb(255,69,0) #FF4500 OrangeRed
rgb(218,112,214) #DA70D6 Orchid
rgb(238,232,170) #EEE8AA PaleGoldenRod
rgb(152,251,152) #۹۸FB98 PaleGreen
rgb(175,238,238) #AFEEEE PaleTurquoise
rgb(219,112,147) #DB7093 PaleVioletRed
rgb(255,239,213) #FFEFD5 PapayaWhip
rgb(255,218,185) #FFDAB9 PeachPuff
rgb(205,133,63) #CD853F Peru
rgb(255,192,203) #FFC0CB Pink
rgb(221,160,221) #DDA0DD Plum
rgb(176,224,230) #B0E0E6 PowderBlue
rgb(128,0,128) #۸۰۰۰۸۰ Purple
rgb(102,51,153) #۶۶۳۳۹۹ RebeccaPurple
rgb(255,0,0) #FF0000 Red
rgb(188,143,143) #BC8F8F RosyBrown
rgb(65,105,225) #۴۱۶۹E1 RoyalBlue
rgb(139,69,19) #۸B4513 SaddleBrown
rgb(250,128,114) #FA8072 Salmon
rgb(244,164,96) #F4A460 SandyBrown
rgb(46,139,87) #۲E8B57 SeaGreen
rgb(255,245,238) #FFF5EE SeaShell
rgb(160,82,45) #A0522D Sienna
rgb(192,192,192) #C0C0C0 Silver
rgb(135,206,235) #۸۷CEEB SkyBlue
rgb(106,90,205) #۶A5ACD SlateBlue
rgb(112,128,144) #۷۰۸۰۹۰ SlateGray
rgb(112,128,144) #۷۰۸۰۹۰ SlateGrey
rgb(255,250,250) #FFFAFA Snow
rgb(0,255,127) #۰۰FF7F SpringGreen
rgb(70,130,180) #۴۶۸۲B4 SteelBlue
rgb(210,180,140) #D2B48C Tan
rgb(0,128,128) #۰۰۸۰۸۰ Teal
rgb(216,191,216) #D8BFD8 Thistle
rgb(255,99,71) #FF6347 Tomato
rgb(64,224,208) #۴۰E0D0 Turquoise
rgb(238,130,238) #EE82EE Violet
rgb(245,222,179) #F5DEB3 Wheat
rgb(255,255,255) #FFFFFF White
rgb(245,245,245) #F5F5F5 WhiteSmoke
rgb(255,255,0) #FFFF00 Yellow
rgb(154,205,50) #۹ACD32 YellowGreen
بیشتر بخوانید :
جلسه 8 دوره طراحی قالب فروشگاهی در فتوشاپ
اشتراک گذاری:

حتما" بخوانید پیشنهاد سون ریپلای

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نماد های اعتماد

سون ریپلای به استناد نماد های زیر ، دارای مجوز رسمی از مراجع مربوطه در جمهوری اسلامی ایران می باشد !

درگاه سامان
درگاه به پرداخت

تمامی حقوق برای سون ریپلای محفوظ است | طراحی شده با در سون ریپلای