سلام و دورود میکنم خدمت تمام دوستان و همراهان همیشگی وب سایت سون ریپلای در جلسه از آموزش html css میخواهیم آموزش کار با رنگ ها یا Colors در HTML خدمت شما عزیزان آموزش بدیم پس تا آخر باما همراه باشید .
در طراحی صفحات html در موارد زیادی همچون تعیین رنگ پس زمینه ، رنگ فونت های متن و …
می توانیم از رنگ های مختلف استفاده کنیم . برای تعیین یک رنگ مشخص در html ،
سه روش وجود دارد که در ادامه هر یک را شرح خواهیم داد .
از رنگها توسط سه شیوه RGB و HEX و Name می توان استفاده کرد. مثلا هر سه دستور زیر رنگ پس زمینه را به سیاه تغییر خواهند داد.
- <body bgcolor=”#000000″>
- <body bgcolor=”rgb(0,0,0)”>
- <body bgcolor=”black”>
در استفاده از رنگها بهتر است از شیوه Name استفاده نکنید و دو شیوه دیگر را به کار ببرید چون نام رنگها برای همه مرورگرها قابل استفاده نمی باشد.
توسط دستور rgb می توانید تا ۱۶ میلیون رنگ بسازید یعنی ۲۵۶×۲۵۶×۲۵۶ . نمونه ای از نام رنگها و شماره های آنها را در جدول بعد می بینید.
کار با رنگ ها یا Colors در HTML
رنگ متنها را در اچ تی ام ال به دو شکل میتوان تعیین کرد. در حالت اول, رنگ نوشتهها را با رنگهای پیش فرض (مثلا blue، yellow یا …) مشخص میکنند.
در این حالت انتخابها به رنگهای از پیش تعریف شده محدود میشود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آنها در کنار علامت # استفاده کنید.
مثلا 888888# رنگ سفید یا FF330A# رنگ نارنجی است.
برای به دست آوردن کد رنگها میتوانید از نرم افزارهای گرافیکی همچون فوتوشاپ یا سرویسهای آنلاین همچون HTML Color یا HTML Color picker استفاده نمایید.
کدهگزادسیمال رنگ ها در طراحی وب یا به انگلیسی Hexadecimal
در شروع کار، نیازی به یادگیری و تسلط کامل بر این روش رو ندارین، چرا که میتونه کمی سردرگمتون کنه. اما در آینده،
اکثز رنگ آمیزی های خودتونو با این روش انجام خواهید داد. چرا که روش بسیار قدرتمند و گستردهای محسوب میشه.
طبق این روش، به هر رنگ، یک کد میتونیم اختصاص بدیم. کد هر رنگ، تلفیقی از رنگ های قرمز، سبز و آبی هست و به فرم کلی rrggbb# نشون داده میشه.
بازه هر رنگ از 00 تا 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) | |
آبی بنفش | #9370DB | rgb(147,112,219) | |
آبی فولادی | #6A5ACD | rgb(106,90,205) | |
آبی-بنفش سیر | #8A2BE2 | rgb(138,43,226) | |
بنفش باز | #9400D3 | rgb(148,0,211) | |
ارکیده بنفش | #9932CC | rgb(153,50,204) | |
مخملی | #8B008B | rgb(139,0,139) | |
بنفش | #800080 | rgb(128,0,128) | |
آبی دودی | #483D8B | rgb(72,61,139) | |
نیلی سیر | #4B0082 | rgb(75,0,130) |
به نکته زیر توجه کنید و خوب اون رو به خاطر بسپارید:
یک رنگ از 255 قسمت تشکیل شده، هرچی 255 کمتر شه رنگ تاریکتر و هرچی بیشتر شه رنگ روشنتر میشه
هگز (HEX) استانداردی از طیف های رنگی بر مبنای عدد 16 (Hexadecimal) است که مقادیر آن از ترکیب اعداد 0-9 و حروف A, B, C, D, E, F تشکیل شده و در وب کاربردهای زیادی دارد،
مخصوصا در استایل نویسی با خاصیت های CSS، هر کد و ترکیب اعداد و حروف در این سیستم نمایانگر یک رنگ استاندارد است،
به طور مثال عدد 000000 رنگ مشکی و حروف FFFFFF رنگ سفید را نشان می دهند.
کار با رنگ ها یا Colors در HTML مدل رنگ آر جی بی ( RGB )
RGB در واقع مخفف سه رنگ اصلی قرمز، سبز و آبی (Red, Green, Blue) است و در اصطلاح به استانداردی گفته می شود که برای نمایش رنگ های مختلف در دستگاه های الکترونیکی نظیر مانیتورها کاربرد دارد،
در این سیستم از ترکیب مقادیر سه رنگ اصلی قرمز، سبز و آبی، برای ایجاد یک رنگ جدید استفاده می شود،
مقادیر هر رنگ نیز می تواند بین 0 (تیره) تا 255 (روشن) در نوسان باشد،
RGB موارد استفاده فراوانی دارد، از جمله در کارهای گرافیکی، برنامه نویسی و…
در این آموزش کار با رنگ ها یا Colors در HTML مفهوم تعیین رنگ را آشنا شدیم و همچنین متوجه شدیم که مقادیر پیش فرض چه مقادیری هستند و چگونه میتوانیم از آن ها استفاده کنیم.
همچنین با کد رنگ های مبنای 16 یا HEX نیز آشنا شدیم و متوجه شدیم که چگونه تعریف میشوند و در چه مواردی از آن ها استفاده میشود.
شما میتوانید در رابطه با دیگر روش های تعیین رنگ در فصل چهارم یعنی فصل رنگ ها بیشتر بخوانید.
در پایان هم یک تعداد رنگ که توسط کد های Hexadecimal و rgb تولید شده است را خدمت شما قرار دادم میتوایند استفاده لازم را ببرید هر گونه نظر یا پیشنهادی داشته باشید توی قسمت نظرات سایت برای من بنیسید.
آموزش کار با رنگ ها
تعداد 140 رنگ در CSS و HTML نام استاندارد تعریف شده که تمام مرورگرهای مدرن از این نام رنگ ها پشتیبانی می کنند. کلیه 140 رنگ همراه با نام و مقادیر 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) | #00FFFF | Aqua | |
rgb(127,255,212) | #7FFFD4 | Aquamarine | |
rgb(240,255,255) | #F0FFFF | Azure | |
rgb(245,245,220) | #F5F5DC | Beige | |
rgb(255,228,196) | #FFE4C4 | Bisque | |
rgb(0,0,0) | #000000 | Black | |
rgb(255,235,205) | #FFEBCD | BlanchedAlmond | |
rgb(0,0,255) | #0000FF | Blue | |
rgb(138,43,226) | #8A2BE2 | BlueViolet | |
rgb(165,42,42) | #A52A2A | Brown | |
rgb(222,184,135) | #DEB887 | BurlyWood | |
rgb(95,158,160) | #5F9EA0 | CadetBlue | |
rgb(127,255,0) | #7FFF00 | Chartreuse | |
rgb(210,105,30) | #D2691E | Chocolate | |
rgb(255,127,80) | #FF7F50 | Coral | |
rgb(100,149,237) | #6495ED | CornflowerBlue | |
rgb(255,248,220) | #FFF8DC | Cornsilk | |
rgb(220,20,60) | #DC143C | Crimson | |
rgb(0,255,255) | #00FFFF | Cyan | |
rgb(0,0,139) | #00008B | DarkBlue | |
rgb(0,139,139) | #008B8B | DarkCyan | |
rgb(184,134,11) | #B8860B | DarkGoldenRod | |
rgb(169,169,169) | #A9A9A9 | DarkGray | |
rgb(169,169,169) | #A9A9A9 | DarkGrey | |
rgb(0,100,0) | #006400 | DarkGreen | |
rgb(189,183,107) | #BDB76B | DarkKhaki | |
rgb(139,0,139) | #8B008B | DarkMagenta | |
rgb(85,107,47) | #556B2F | DarkOliveGreen | |
rgb(255,140,0) | #FF8C00 | DarkOrange | |
rgb(153,50,204) | #9932CC | DarkOrchid | |
rgb(139,0,0) | #8B0000 | DarkRed | |
rgb(233,150,122) | #E9967A | DarkSalmon | |
rgb(143,188,143) | #8FBC8F | DarkSeaGreen | |
rgb(72,61,139) | #483D8B | DarkSlateBlue | |
rgb(47,79,79) | #2F4F4F | DarkSlateGray | |
rgb(47,79,79) | #2F4F4F | DarkSlateGrey | |
rgb(0,206,209) | #00CED1 | DarkTurquoise | |
rgb(148,0,211) | #9400D3 | DarkViolet | |
rgb(255,20,147) | #FF1493 | DeepPink | |
rgb(0,191,255) | #00BFFF | DeepSkyBlue | |
rgb(105,105,105) | #696969 | DimGray | |
rgb(105,105,105) | #696969 | DimGrey | |
rgb(30,144,255) | #1E90FF | DodgerBlue | |
rgb(178,34,34) | #B22222 | FireBrick | |
rgb(255,250,240) | #FFFAF0 | FloralWhite | |
rgb(34,139,34) | #228B22 | 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) | #808080 | Gray | |
rgb(128,128,128) | #808080 | Grey | |
rgb(0,128,0) | #008000 | 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) | #4B0082 | 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) | #7CFC00 | 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) | #90EE90 | LightGreen | |
rgb(255,182,193) | #FFB6C1 | LightPink | |
rgb(255,160,122) | #FFA07A | LightSalmon | |
rgb(32,178,170) | #20B2AA | LightSeaGreen | |
rgb(135,206,250) | #87CEFA | LightSkyBlue | |
rgb(119,136,153) | #778899 | LightSlateGray | |
rgb(119,136,153) | #778899 | LightSlateGrey | |
rgb(176,196,222) | #B0C4DE | LightSteelBlue | |
rgb(255,255,224) | #FFFFE0 | LightYellow | |
rgb(0,255,0) | #00FF00 | Lime | |
rgb(50,205,50) | #32CD32 | LimeGreen | |
rgb(250,240,230) | #FAF0E6 | Linen | |
rgb(255,0,255) | #FF00FF | Magenta | |
rgb(128,0,0) | #800000 | Maroon | |
rgb(102,205,170) | #66CDAA | MediumAquaMarine | |
rgb(0,0,205) | #0000CD | MediumBlue | |
rgb(186,85,211) | #BA55D3 | MediumOrchid | |
rgb(147,112,219) | #9370DB | MediumPurple | |
rgb(60,179,113) | #3CB371 | MediumSeaGreen | |
rgb(123,104,238) | #7B68EE | MediumSlateBlue | |
rgb(0,250,154) | #00FA9A | MediumSpringGreen | |
rgb(72,209,204) | #48D1CC | MediumTurquoise | |
rgb(199,21,133) | #C71585 | MediumVioletRed | |
rgb(25,25,112) | #191970 | 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) | #000080 | Navy | |
rgb(253,245,230) | #FDF5E6 | OldLace | |
rgb(128,128,0) | #808000 | Olive | |
rgb(107,142,35) | #6B8E23 | 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) | #98FB98 | 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) | #800080 | Purple | |
rgb(102,51,153) | #663399 | RebeccaPurple | |
rgb(255,0,0) | #FF0000 | Red | |
rgb(188,143,143) | #BC8F8F | RosyBrown | |
rgb(65,105,225) | #4169E1 | RoyalBlue | |
rgb(139,69,19) | #8B4513 | SaddleBrown | |
rgb(250,128,114) | #FA8072 | Salmon | |
rgb(244,164,96) | #F4A460 | SandyBrown | |
rgb(46,139,87) | #2E8B57 | SeaGreen | |
rgb(255,245,238) | #FFF5EE | SeaShell | |
rgb(160,82,45) | #A0522D | Sienna | |
rgb(192,192,192) | #C0C0C0 | Silver | |
rgb(135,206,235) | #87CEEB | SkyBlue | |
rgb(106,90,205) | #6A5ACD | SlateBlue | |
rgb(112,128,144) | #708090 | SlateGray | |
rgb(112,128,144) | #708090 | SlateGrey | |
rgb(255,250,250) | #FFFAFA | Snow | |
rgb(0,255,127) | #00FF7F | SpringGreen | |
rgb(70,130,180) | #4682B4 | SteelBlue | |
rgb(210,180,140) | #D2B48C | Tan | |
rgb(0,128,128) | #008080 | Teal | |
rgb(216,191,216) | #D8BFD8 | Thistle | |
rgb(255,99,71) | #FF6347 | Tomato | |
rgb(64,224,208) | #40E0D0 | 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) | #9ACD32 | YellowGreen |
هیچ دیدگاهی برای این نوشته ثبت نشده است.