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

سلام و دورود میکنم خدمت تمام دوستان و همراهان همیشگی وب سایت سون ریپلای در جلسه از آموزش 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

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

بیشتر بخوانید :
دانلود فونت کروش BKourosh

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

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

نام فارسیHEX کد رنگکد رنگ RGBنمونه رنگ
نیلی کمرنگ#E6E6FArgb(230,230,250)
بادمجانی روشن#D8BFD8rgb(216,191,216)
بنفش کدر#DDA0DDrgb(221,160,221)
بنفش روشن#EE82EErgb(238,130,238)
سرخابی#FF00FFrgb(255,0,255)
ارکیده#DA70D6rgb(218,112,214)
ارکیده سیر#BA55D3rgb(186,85,211)
آبی بنفش#۹۳۷۰DBrgb(147,112,219)
آبی فولادی#۶A5ACDrgb(106,90,205)
آبی-بنفش سیر#۸A2BE2rgb(138,43,226)
بنفش باز#۹۴۰۰D3rgb(148,0,211)
ارکیده بنفش#۹۹۳۲CCrgb(153,50,204)
مخملی#۸B008Brgb(139,0,139)
بنفش#۸۰۰۰۸۰rgb(128,0,128)
آبی دودی#۴۸۳D8Brgb(72,61,139)
نیلی سیر#۴B0082rgb(75,0,130)

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

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

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

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

 

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

بیشتر بخوانید :
آموزش کار با لیست ها یا Lists در HTML

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

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

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

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

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

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

 

ColorRGB CodeHEX CodeColor Name
rgb(240,248,255)#F0F8FFAliceBlue
rgb(250,235,215)#FAEBD7AntiqueWhite
rgb(0,255,255)#۰۰FFFFAqua
rgb(127,255,212)#۷FFFD4Aquamarine
rgb(240,255,255)#F0FFFFAzure
rgb(245,245,220)#F5F5DCBeige
rgb(255,228,196)#FFE4C4Bisque
rgb(0,0,0)#۰۰۰۰۰۰Black
rgb(255,235,205)#FFEBCDBlanchedAlmond
rgb(0,0,255)#۰۰۰۰FFBlue
rgb(138,43,226)#۸A2BE2BlueViolet
rgb(165,42,42)#A52A2ABrown
rgb(222,184,135)#DEB887BurlyWood
rgb(95,158,160)#۵F9EA0CadetBlue
rgb(127,255,0)#۷FFF00Chartreuse
rgb(210,105,30)#D2691EChocolate
rgb(255,127,80)#FF7F50Coral
rgb(100,149,237)#۶۴۹۵EDCornflowerBlue
rgb(255,248,220)#FFF8DCCornsilk
rgb(220,20,60)#DC143CCrimson
rgb(0,255,255)#۰۰FFFFCyan
rgb(0,0,139)#۰۰۰۰۸BDarkBlue
rgb(0,139,139)#۰۰۸B8BDarkCyan
rgb(184,134,11)#B8860BDarkGoldenRod
rgb(169,169,169)#A9A9A9DarkGray
rgb(169,169,169)#A9A9A9DarkGrey
rgb(0,100,0)#۰۰۶۴۰۰DarkGreen
rgb(189,183,107)#BDB76BDarkKhaki
rgb(139,0,139)#۸B008BDarkMagenta
rgb(85,107,47)#۵۵۶B2FDarkOliveGreen
rgb(255,140,0)#FF8C00DarkOrange
rgb(153,50,204)#۹۹۳۲CCDarkOrchid
rgb(139,0,0)#۸B0000DarkRed
rgb(233,150,122)#E9967ADarkSalmon
rgb(143,188,143)#۸FBC8FDarkSeaGreen
rgb(72,61,139)#۴۸۳D8BDarkSlateBlue
rgb(47,79,79)#۲F4F4FDarkSlateGray
rgb(47,79,79)#۲F4F4FDarkSlateGrey
rgb(0,206,209)#۰۰CED1DarkTurquoise
rgb(148,0,211)#۹۴۰۰D3DarkViolet
rgb(255,20,147)#FF1493DeepPink
rgb(0,191,255)#۰۰BFFFDeepSkyBlue
rgb(105,105,105)#۶۹۶۹۶۹DimGray
rgb(105,105,105)#۶۹۶۹۶۹DimGrey
rgb(30,144,255)#۱E90FFDodgerBlue
rgb(178,34,34)#B22222FireBrick
rgb(255,250,240)#FFFAF0FloralWhite
rgb(34,139,34)#۲۲۸B22ForestGreen
rgb(255,0,255)#FF00FFFuchsia
rgb(220,220,220)#DCDCDCGainsboro
rgb(248,248,255)#F8F8FFGhostWhite
rgb(255,215,0)#FFD700Gold
rgb(218,165,32)#DAA520GoldenRod
rgb(128,128,128)#۸۰۸۰۸۰Gray
rgb(128,128,128)#۸۰۸۰۸۰Grey
rgb(0,128,0)#۰۰۸۰۰۰Green
rgb(173,255,47)#ADFF2FGreenYellow
rgb(240,255,240)#F0FFF0HoneyDew
rgb(255,105,180)#FF69B4HotPink
rgb(205,92,92)#CD5C5CIndianRed
rgb(75,0,130)#۴B0082Indigo
rgb(255,255,240)#FFFFF0Ivory
rgb(240,230,140)#F0E68CKhaki
rgb(230,230,250)#E6E6FALavender
rgb(255,240,245)#FFF0F5LavenderBlush
rgb(124,252,0)#۷CFC00LawnGreen
rgb(255,250,205)#FFFACDLemonChiffon
rgb(173,216,230)#ADD8E6LightBlue
rgb(240,128,128)#F08080LightCoral
rgb(224,255,255)#E0FFFFLightCyan
rgb(250,250,210)#FAFAD2LightGoldenRodYellow
rgb(211,211,211)#D3D3D3LightGray
rgb(211,211,211)#D3D3D3LightGrey
rgb(144,238,144)#۹۰EE90LightGreen
rgb(255,182,193)#FFB6C1LightPink
rgb(255,160,122)#FFA07ALightSalmon
rgb(32,178,170)#۲۰B2AALightSeaGreen
rgb(135,206,250)#۸۷CEFALightSkyBlue
rgb(119,136,153)#۷۷۸۸۹۹LightSlateGray
rgb(119,136,153)#۷۷۸۸۹۹LightSlateGrey
rgb(176,196,222)#B0C4DELightSteelBlue
rgb(255,255,224)#FFFFE0LightYellow
rgb(0,255,0)#۰۰FF00Lime
rgb(50,205,50)#۳۲CD32LimeGreen
rgb(250,240,230)#FAF0E6Linen
rgb(255,0,255)#FF00FFMagenta
rgb(128,0,0)#۸۰۰۰۰۰Maroon
rgb(102,205,170)#۶۶CDAAMediumAquaMarine
rgb(0,0,205)#۰۰۰۰CDMediumBlue
rgb(186,85,211)#BA55D3MediumOrchid
rgb(147,112,219)#۹۳۷۰DBMediumPurple
rgb(60,179,113)#۳CB371MediumSeaGreen
rgb(123,104,238)#۷B68EEMediumSlateBlue
rgb(0,250,154)#۰۰FA9AMediumSpringGreen
rgb(72,209,204)#۴۸D1CCMediumTurquoise
rgb(199,21,133)#C71585MediumVioletRed
rgb(25,25,112)#۱۹۱۹۷۰MidnightBlue
rgb(245,255,250)#F5FFFAMintCream
rgb(255,228,225)#FFE4E1MistyRose
rgb(255,228,181)#FFE4B5Moccasin
rgb(255,222,173)#FFDEADNavajoWhite
rgb(0,0,128)#۰۰۰۰۸۰Navy
rgb(253,245,230)#FDF5E6OldLace
rgb(128,128,0)#۸۰۸۰۰۰Olive
rgb(107,142,35)#۶B8E23OliveDrab
rgb(255,165,0)#FFA500Orange
rgb(255,69,0)#FF4500OrangeRed
rgb(218,112,214)#DA70D6Orchid
rgb(238,232,170)#EEE8AAPaleGoldenRod
rgb(152,251,152)#۹۸FB98PaleGreen
rgb(175,238,238)#AFEEEEPaleTurquoise
rgb(219,112,147)#DB7093PaleVioletRed
rgb(255,239,213)#FFEFD5PapayaWhip
rgb(255,218,185)#FFDAB9PeachPuff
rgb(205,133,63)#CD853FPeru
rgb(255,192,203)#FFC0CBPink
rgb(221,160,221)#DDA0DDPlum
rgb(176,224,230)#B0E0E6PowderBlue
rgb(128,0,128)#۸۰۰۰۸۰Purple
rgb(102,51,153)#۶۶۳۳۹۹RebeccaPurple
rgb(255,0,0)#FF0000Red
rgb(188,143,143)#BC8F8FRosyBrown
rgb(65,105,225)#۴۱۶۹E1RoyalBlue
rgb(139,69,19)#۸B4513SaddleBrown
rgb(250,128,114)#FA8072Salmon
rgb(244,164,96)#F4A460SandyBrown
rgb(46,139,87)#۲E8B57SeaGreen
rgb(255,245,238)#FFF5EESeaShell
rgb(160,82,45)#A0522DSienna
rgb(192,192,192)#C0C0C0Silver
rgb(135,206,235)#۸۷CEEBSkyBlue
rgb(106,90,205)#۶A5ACDSlateBlue
rgb(112,128,144)#۷۰۸۰۹۰SlateGray
rgb(112,128,144)#۷۰۸۰۹۰SlateGrey
rgb(255,250,250)#FFFAFASnow
rgb(0,255,127)#۰۰FF7FSpringGreen
rgb(70,130,180)#۴۶۸۲B4SteelBlue
rgb(210,180,140)#D2B48CTan
rgb(0,128,128)#۰۰۸۰۸۰Teal
rgb(216,191,216)#D8BFD8Thistle
rgb(255,99,71)#FF6347Tomato
rgb(64,224,208)#۴۰E0D0Turquoise
rgb(238,130,238)#EE82EEViolet
rgb(245,222,179)#F5DEB3Wheat
rgb(255,255,255)#FFFFFFWhite
rgb(245,245,245)#F5F5F5WhiteSmoke
rgb(255,255,0)#FFFF00Yellow
rgb(154,205,50)#۹ACD32YellowGreen
بیشتر بخوانید :
آموزش طراحی قالب ووکامرس استایل archive-product و تکمیل

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

سوالی دارید؟ بپرسید پاسخ خواهیم داد...

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