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

رنگ‌های HTML روشی برای مشخص کردن ظاهر عناصر وب هستند. آن‌ها جنبه‌های بسیار مهمی در طراحی وب محسوب می‌شوند، زیرا نه تنها جذابیت بصری را افزایش می‌دهند بلکه بر رفتار کاربر نیز تأثیر می‌گذارند. همچنین برای برانگیختن احساسات و برجسته کردن محتوای مهم استفاده می‌شوند.

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

روش‌های کدگذاری رنگ در HTML

سه روش زیر برای تنظیم رنگ‌ها در یک صفحه وب استفاده می‌شوند −

• نام‌های رنگ − ما می‌توانیم نام رنگ‌ها را مستقیماً مانند green، blue یا red مشخص کنیم.

• کدهای Hex − یک کد شش رقمی که میزان قرمز، سبز و آبی تشکیل‌دهنده رنگ را نشان می‌دهد.

• مقادیر اعشاری یا درصدی رنگ − این مقدار با استفاده از ویژگی rgb() مشخص می‌شود.

ما این روش‌های کدگذاری رنگ را در فصل‌های آینده خواهیم آموخت.

نام‌های رنگ در HTML

ما می‌توانیم یک نام رنگ مستقیم را برای تنظیم رنگ متن یا پس‌زمینه مشخص کنیم. W3C لیست ۱۶ نام رنگ پایه را ارائه کرده است که توسط اعتبارسنج HTML تأیید می‌شوند، اما بیش از ۲۰۰ نام رنگ مختلف وجود دارد که توسط مرورگرهای اصلی پشتیبانی می‌شوند.

لیست کامل نام‌های رنگ پشتیبانی‌شده در HTML را بیابید:نام‌های رنگ HTML

۱۶ رنگ استاندارد W3C

موارد زیر نام‌های رنگ استاندارد W3C هستند که توسط همه مرورگرها پشتیبانی می‌شوند:

مثال

در اینجا مثالی آورده شده است که نشان می‌دهد چگونه می‌توانید از نام‌های رنگ در یک سند HTML استفاده کنید:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Colors by Name</title>
</head>
<body text="blue" bgcolor="green">
   <p>Use different color names for for body and table and see the result.</p>
   <table bgcolor="black">
      <tr>
         <td>
            <font color="white">This text will appear white on black background.</font>
         </td>
      </tr>
   </table>
</body>
</html>

رنگ‌های ایمن مرورگر (Browser Safe Colors)

رنگ‌ها همچنین می‌توانند با استفاده از رنگ‌های ایمن وب مشخص شوند که از ترکیب مقادیر hex قرمز، سبز و آبی (RGB) تشکیل می‌شوند.

در اینجا لیستی از ۲۱۶ رنگ آورده شده است که سازگارترین و ایمن‌ترین رنگ‌ها در کامپیوترهای مختلف در نظر گرفته می‌شوند. این رنگ‌ها از کد شانزده‌شانزدهی #000000 (مشکی) تا #FFFFFF (سفید) متغیر هستند و توسط تمام کامپیوترهایی که از پالت ۲۵۶ رنگی استفاده می‌کنند پشتیبانی می‌شوند.

تنظیم رنگ متن

برای تنظیم رنگ متن در HTML، مقدار رنگ متن را در ویژگی color از صفت style مشخص می‌کنیم. مقدار رنگ می‌تواند با استفاده از هر یک از روش‌های بررسی‌شده در بالا تعیین شود.

مثال

مثال زیر نحوه تنظیم رنگ برای یک متن با استفاده از روش نام رنگ را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Setting HTML Text Color </title>
</head>
<body>
   <h2 style="color: Fuchsia;">Setting Text Color in HTML</h3>
   <p style="color: Teal;">This line is created using paragraph tag and its color is <b>Teal</b>. </p>
   <p style="color: SlateBlue;">This is another line created using paragraph tag and its color is <b>SlateBlue</b>. </p>
</body>
</html>

کد HTML بالا یک عنوان و دو پاراگراف متفاوت با رنگ‌های متمایز ایجاد می‌کند.

تنظیم رنگ پس‌زمینه

برای تنظیم رنگ پس‌زمینه برای هر عنصر HTML، مقدار رنگ را در ویژگی background-color از صفت style مشخص می‌کنیم. مقدار رنگ می‌تواند با استفاده از هر یک از روش‌های بررسی‌شده در بالا تعیین شود.

مثال

مثال زیر نحوه تنظیم رنگ پس‌زمینه را برای عناصر HTML با استفاده از روش نام رنگ نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Background Color </title>
</head>
<body>
   <h2 style="background-color: Fuchsia;">Setting Background Color in HTML</h3>
   <p style="background-color: Teal;">This line is created using paragraph tag and its background color is <b>Teal</b>.</p>
   <p style="background-color: SlateBlue;">This is another line created using paragraph tag and its background color is <b>SlateBlue</b>.</p>
</body>
</html>

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

تنظیم رنگ حاشیه (Border)

برای تنظیم رنگ حاشیه برای هر عنصر HTML، مقدار رنگ را در ویژگی border از صفت style مشخص می‌کنیم. مقدار رنگ می‌تواند با استفاده از هر یک از روش‌های بررسی‌شده در بالا تعیین شود.

مثال

در مثال زیر، قصد داریم رنگ حاشیه را برای عناصر HTML با استفاده از روش نام رنگ تنظیم کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>Border Color </title>
</head>
<body>
   <h2 style="border: 2.5px solid Fuchsia;">Setting Border Color in HTML</h3>
   <p style="border: 2.5px dotted Teal;">This line is created using paragraph tag and its border color is <b>Teal</b>. </p>
   <p style="border: 2.5px dashed SlateBlue;">This is another line created using paragraph tag and its border color is <b>SlateBlue</b>. </p>
</body>
</html>

هنگامی که کد HTML بالا را اجرا می‌کنیم، یک عنوان و دو پاراگراف متفاوت با رنگ‌های حاشیه متمایز ایجاد می‌کند.