رنگ ها در HTML
رنگ ها با ترکیب نورهای قرمز، آبی و سبز نمایش داده می شوند.
مقادیر رنگ ها در CSS
برای ترکیب مقدار رنگ های قرمز، سبز و آبی در HTML، از مبنای هگزا دسیمال (HEX) استفاده می شود.
کمترین مقداری که می توان به یک منبع نوری داد صفر (در مبنای هگزا دسیمال: 00 ) و بیشترین مقدار255 (در مبنای هگزا:FF) می باشد.
مقادیر HEX به صورت سه جفت از اعداد دو رقمی که با علامت # شروع می شوند مشخص می شوند.
Color Values
Color | Color HEX | Color RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
شانزده میلیون رنگ مختلف
ترکیب قرمز، سبز و آبی با مقادیر صفر تا 255، بیش از شانزده میلیون رنگ مختلف ارائه می دهد. (256*256*256)
اگر به جدول زیر نگاهی بیاندازید، نتیجه تغییر نور قرمز از صفر تا 255 را خواهید دید وقتی که نور سبز و آبی صفر باشد.
Red Light | Color HEX | Color RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
سایه های خاکستری
رنگ های خاکستری با استفاده از مقدار رنگی مساوی از منبع های نوری ایجاد می شوند.
برای اینکه کار انتخاب سایه مناسب را برای شما راحت تر کرده باشیم، جدولی از سایه های خاکستری را برای شما ایجاد کرده ایم.
Gray Shades | Color HEX | Color RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104,104,104) | |
#707070 | rgb(112,112,112) | |
#787878 | rgb(120,120,120) | |
#808080 | rgb(128,128,128) | |
#888888 | rgb(136,136,136) | |
#909090 | rgb(144,144,144) | |
#989898 | rgb(152,152,152) | |
#A0A0A0 | rgb(160,160,160) | |
#A8A8A8 | rgb(168,168,168) | |
#B0B0B0 | rgb(176,176,176) | |
#B8B8B8 | rgb(184,184,184) | |
#C0C0C0 | rgb(192,192,192) | |
#C8C8C8 | rgb(200,200,200) | |
#D0D0D0 | rgb(208,208,208) | |
#D8D8D8 | rgb(216,216,216) | |
#E0E0E0 | rgb(224,224,224) | |
#E8E8E8 | rgb(232,232,232) | |
#F0F0F0 | rgb(240,240,240) | |
#F8F8F8 | rgb(248,248,248) | |
#FFFFFF | rgb(255,255,255) |
رنگ های امن در وب
سال ها پیش، هنگامی که کامپیوتر ها حداکثر 256 رنگ مختلف را پشتیبانی می کردند، لیستی از 216 رنگ مختلف به عنوان یک استاندارد وب پیشنهاد شد و 40 رنگ به عنوان رنگ های سیستمی رزور شد.
جدولی از 216 رنگ برای اطمینان از اینکه همه کامپیوترها رنگ ها را به درستی نمایش دهند ایجاد شد.
اما امروزه از زمانی که کامپیوتر ها توانستند میلیون ها رنگ مختلف را نشان دهد دیگر این امر مهمی نیست. به هر حال، در زیر جدول این پالت رنگی ارائه شده است.
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 42976
دیدگاهها
بهترین راه حل و آسان ترین راه حل برای تبدیل کد رنگ ها به یکدیگر استفاده از inspect element خود مرورگر است.
سلام
ممنون از سايت مفيد و كارامدتون و همجنين ممنون از باسخ به كامنت ها با حوصله، خدا قوت،
يك سوال داشتم
وقتي ميشه براي كد نويسي وب از برنامه اي مثل Dreamwaver استفاده كرد و رنك بندي ها جدول ها و خيلي از كزينه ها رو با محيط كرافيكي و اسان ان بياده سازي كرد، جرا نبايد ازش استفاده كرد و اين كد هايي مثل رنك بندي ك بي استفاده هستند رو ياد كرفت؟
با تشكر
سلام بر شما دوست عزیز
شما به هیچ عنوان با Dreamwaver قادر به تولید یک نرم افزار عظیم نیستید. مخصوصا که برای کارهای تیمی هم مناسب نیست ...! اگر به سراغ Visual Studio بروید و اگر بخواهید یک پروژه را با استفاده از ASP.NET MVC ایجاد کنید خواهید دید که باید با تمام تگ های HTML و ویژگی هایشان آشنا باشید و در واقع باید اسکریبت آنها را یا تایپ کنید و یا کپی و پیست.
در واقع دانستن موضوعات بالا، باعث می شود تا کارها بسیار سریع تر از آنچه فکر می کنید پیش برود.
سلام خسته نباشید
اگر ما فقط یا شمارهای Color RGB رو بلد باشیم نیاز نیس Color HEX از این کدها استفاده کنیم.لطفا توضیحاتی بدید تشکر
با سلام خدمت شما دوست عزیز فک نمیکنم نیازی باشه که شما همه رو بلد باشید هر کدوم رو که خواستید به راحتی میتونید به دست بیارید و استفاده کنید و اصلا به حفظ کردن نیازی ندارید
سلام و ممنون از سايت فوق العاده مفيدتون.
در مورد انتخاب رنگ ها سريعترين و در دسترس ترين روش استفاده از سايت هايی مثل colorpicker هست.
سلام
در قسمت نوشتن کدهای رنگ هم شامل عدد هم شامل حروف میشوند
سوال 1- آیا حروفی که به کار میروند از a تا f هستند ؟
سفید FFFFFF 255,255,255
سیاه 000,000,000 حروفی ؟؟؟
سلام
برای نوشتن یک عدد هگزادسیمال(مبنا ی 16) از گزینه های زیر استفاده می شود:
اعداد : از 0 تا 9 و حروف از a تا f.
رنگ سفید به صورت rgb: برابر با 255,255,255 است و همین رنگ به صورت هگزادسیمال به صورت : ffffff می باشد.
رنگ سیاه به صورت rgb برابر با 0,0,0 است و همین رنگ به صورت هگزادسیمال برابر با 000000 است.
بسیار بسیار ممنون و عذر خواهی برای سوالات زیاد :)
چجوری عدد rgb رو به هگزا تبدیل میکنیم؟مثلا چجوری می فهمیم معادل 49 چی میشه؟
بهترین راه حل، استفاده از نرم افزار فتوشاپ است، به این صورت که ابتدا فتوشاپ را باز کنید و سپس از پایین پنل Tools روی آیکن forgrand یا پیش زمینه کلیک نمایید.
با این کار پنجره انتخاب رنگ باز می شود، حالا می توانید با موس رنگ مورد نظرتان را انتخاب کرده و از پایین پنجره، مقدار هگزا دسیمال آنرا کپی کنید و در صفحات HTMl استفاده نمایید.
سلام...
به جای این کار، بهتره از ماشین حساب ویندوز استفاده کنید...از منوی View بزارید رو Programmer ...بعد در پنجره ماشین حساب بزارید روی DEC (دسیمال یا دهدهی به صورت پیش فرض انتخاب شده) عدد رو وارد کنید حالا اون گزینه HEX رو انتخاب کنید...
انجامش به طولانی این نوشته نیست (:
شاد باشید...