آموزش رنگ ها در HTML

در این مقاله به آموزش رنگ ها در HTML می پردازیم.

آموزش رنگ ها در HTML

در طراحی صفحات وب رنگ ها نقش مهمی دارند و بدون استفاده از رنگ ها شما نمی توانید وب سایت های زیبا و جذابی را طراحی کنید. در هنگام طراحی صفحات سایت شما به روش های مختلفی می توانید رنگ عناصر HTML را مشخص کنید.

انواع روش های اعمال رنگ به عناصر HTML

  • استفاده از اسامی رنگ ها
  • استفاده از مقادیر هگزادسیمال رنگ ها
  • استفاده از روش RGB

استفاده از اسامی رنگ ها برای رنگ دهی به عناصر HTML

در طراحی صفحات HTML، شما با استفاده از نام رنگ ها می توانید رنگ متن یا رنگ پس زمینه یک عنصر را مشخص کنید. در تصویر زیر اسامی برخی از رنگ ها به همراه رنگ آن ها نمایش داده شده است.

آموزش رنگ ها در html

زبان HTML از 140 نام رنگ استاندارد پشتیبانی می کند که شما می توانید در طراحی صفحات وب سایت خود از آن ها استفاده کنید.

تعیین رنگ پس زمینه

شما با استفاده از پراپرتی background-color در css می توانید رنگ پس زمینه یک عنصر HTML را تعیین کنید:

آموزش طراحی سایت

دستوررات زیر نحوه تعیین رنگ عناصر HTML را نشان می دهد که خروجی آن را در تصویر بالا می بینید.


تعیین رنگ متن یک عنصر HTML

شما با استفاده از پراپرتی color در CSS می توانید رنگ متن یک عنصر HTML را تعیین کنید:

آموزش Colors در HTML

دستورات زیر نحوه تعیین رنگ یک عنصر HTML را نشان می دهد.

آموزش HTML

تعیین رنگ حاشیه عنصر HTML

شما با استفاده از پراپرتی border در CSS می توانید برای عناصر HTML یک حاشیه ای با رنگ و سبک دلخواه ایجاد کنید:

دستورات زیر نحوه تعیین حاشیه برای عناصر HTML را نشان می دهد.

آموزش طراحی سایت

در HTML رنگ ها می توانند با استفاده از مقادیر RGB ،HEX ,HSL ,RGBA و HSLA هم مشخص شوند. سه مولفه ی div در پایین، رنگ پس زمینه ی خود را با استفاده از مقادیر RGB ،HEX و HSL تنظیم کرده اند.

آموزش رنگ ها در html

دو مولفه ی div پایین رنگ پس زمینه ی خود را با مقادیر RGBA و HSLA تنظیم کرده اند، که مقدار چهارمی Alpha هست که میزان شفافیت رنگ را تعیین می کند که می تواند مقداری بین 0 و 1 داشته باشد.

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

دستورات زیر نحوه اعمال رنگ به عناصر HTML با روش های گوناگون را نشان می دهد.

آموزش HTML

استفاده از روش RGB و RGBA برای تعیین رنگ عناصر HTML

مقدار رنگی RGB ترکیب رنگ های قرمز، سبز و آبی را نمایش می دهد.

مقدار رنگی RGBA نیز شبیه مقدار رنگی RGB است با این تفاوت که مقدار چهارمی به عنوان Alpha که شفافیت (opacity) رنگ را مشخص می کند، می پذیرد.

استفاده از روش RGB برای تعیین رنگ عناصر

در HTML یک رنگ می تواند با استفاده از فرمول زیر به عنوان یک مقدار RGB مشخص شود: هر کدام از 3 پارامتر (red, green, blue) با یک مقداری بین 0 تا 255 که میزان شدت آن رنگ است، مقداردهی می شود. این به این معناست که

16777216 =* 256  256 * 256 رنگ مختلف وجود دارد!

به عنوان مثال rgb(255, 0, 0)، به عنوان رنگ قرمز نمایش داده می شود زیرا که قرمز در بالاترین مقدارش قرار دارد و دو رنگ دیگر صفر هستند.

در این روش رنگ مشکی دارای مقدار رو برو است : rgb(0, 0, 0)

رنگ سفید : rgb(255, 255, 255)

و رنگ های دیگر:

آموزش رنگ ها در html

سطح های مختلف رنگ خاکستری(سایه ها):

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

مقادیر رنگی RGBA

پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون شفافیت) می باشد. مقدار 0 برای این پارامتر باعث دیده نشدن آن می گردد.

مثال های RGBA:

آموزش HTML

مقادیر رنگی HEX

در زبان HTML یک رنگ می تواند با استفاده از مقادیرهگزادسیمال مشخص شود.

rrggbb#

مقادیر هگزادسیمال مقادیری بین 00 و ff می باشند. (مانند دسیمال 0-255)در این سیستم رنگی مقادیر rr میزان شدت رنگ قرمز، مقادیر gg میزان شدت رنگ سبز و مقادیر bb میزان شدت رنگ آبی را با استفاده از مقادیر هگزادسیمال مشخص می کند. برای مثال مقدار هگزادسیمال #ff0000به عنوان رنگ قرمز نمایش داده می شود، زیرا مقدار رنگ قرمز در بالاترین سطح و بقیه ی رنگ ها روی 0 تنظیم شده اند.

در این روش اعمال رنگ، کد هگزادسیمال رنگ سیاه به صورت مقابل می باشد: 000000# رنگ سفید : ffffff#

و رنگ های دیگر:

آموزش طراحی سایت

در این روش تعیین رنگ، سایه ها با استفاده از مقادیر هگزادسیمال زیر ایجاد می شوند.

آموزش رنگ ها در html
آموزش طراحی سایت آموزش HTML آموزش CSS آموزش رنگ ها در HTML آموزش کار با رنگ ها در HTML