نحوه ی استفاده از رنگها در HTML + جدول کد رنگها
همانطور که میدانید رنگهای پیرامون ما از ترکیب سه رنگ اصلی زرد، آبی و قرمز تشکیل میشوند اما در زبان HTML رنگها بر اساس ترکیب سه منبع نوری قرمز(Red)، سبز(Green) و آبی(Blue) کدگذاری میشوند و هر منبع نوری میتواند شدتی بین 0 تا 255 را داشته باشد. در این استاندارد نور سفید رنگی است حاصل از تداخل سه منبع نوری با شدت کامل یعنی 255 و رنگ سیاه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگی يا پیکسل بر روی صفحه مانیتور حاصل برخورد سه اشعه نوری قرمز، سبز و آبی ساخته شده توسط تفنگ الکترونی لامپ تصویر در مانیتورهای CRT ویا زاویه ی چرخش کریستالهای مایع در مانیتورهای LCD میباشد.) بنابر این واضح است که تمامی رنگهای طیف خاکستری باید مقدارهای برابری برای هر منبع RGB داشته باشند، که تیرگی آن با افزایش این مقدار مشترک افزایش میابد.
توجه داشته باشید که مطابق تعریف ذکر شده امکان استفاده از 256×256×256 یا حدود 16 میلیون (16,777,216) رنگ مختلف وجود داشته و در شناسه های مختلف به یکی از سه روش زیر قادر به تعیین رنگ متن یا ناحیه ای خواهید بود:
- استفاده از مقادیر شدت نور در مبنای 16 با فرمت #RRGGBB که RR، GG, BB مقادیر مبنای شانزده نورهای قرمز، سبز و آبی میباشند.
- استفاده از مقادیر شدت نور در مبنای 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادیر مبنای ده نورهای قرمز، سبز و آبی میباشند.
- استفاده از نامهای استاندارد رنگها مانند 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 |
صفحه را چطور رنگ کنیم؟
برخی تگهای HTML صفت color را میشناسند که میتواند برابر با هر کد رنگی باشد. همچنین امکان تعریف خصوصیات رنگی المانها با استفاده از فایلهای stylesheet و یا تگ
این کدها را از کجا بیاوریم؟
هر چند ابزارهای اختصاصی زیادی برای انتخاب رنگ و دریافت کد وجود دارند اما شاید هنوز هم ساده ترین راه برای دسترسی به کد رنگهای مورد نیازتان، استفاده از ابزار ColorPicker فوتوشاپ باشد. ColorPicker با کلیک کردن روی جعبه ی رنگ پیش زمینه یا پس زمینه در photoshop فعال میشود و با این ابزار به سادگی میتوانید رنگ مورد نظرتان را ازطیف گسترده ی رنگ ها با یک کلیک انتخاب کرده و کد hex آن را کپی کرده و با افزودن # به ابتدای کد از آن استفاده کنید.
جدول راهنمای رنگها رایج در اینترنت و کد آنها
| #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 |