آموزش HTML - رنگ‌های شانزده‌شانزدهی (HEX)

رنگ‌های شانزده‌شانزدهی (HEX)

رنگ‌های شانزده‌شانزدهی (HEX) با ترکیب مقادیر شانزده‌شانزدهی (#RRGGBB) رنگ‌های قرمز (RR)، سبز (GG) و آبی (BB) مشخص می‌شوند. مقدار هر رنگ از 00 تا FF متغیر است؛ به‌طوری‌که 00 نشان‌دهنده کمترین شدت و FF نشان‌دهنده بیشترین شدت هر رنگ است.

مقادیر رنگ HEX

هر مقدار رنگ HEX با علامت هشتگ (#) شروع می‌شود و شامل شش رقم است (#RRGGBB). دو رقم اول (RR) مؤلفه قرمز، دو رقم بعدی (GG) مؤلفه سبز و دو رقم آخر (BB) مؤلفه آبی را مشخص می‌کنند. این روش امکان تنظیم دقیق رنگ‌ها را در طراحی وب فراهم می‌کند.

مثال

در اینجا مثالی برای ایجاد رنگ‌های قرمز، سبز و آبی با استفاده از مقادیر HEX آورده شده است:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Hex Color Values</title>
  </head>
  <body>
    <!-- Red color -->
    <div style="background-color: #FF0000; width: 100px; height: 100px;">
      RED Color
    </div>
    <!-- Green color -->
    <div style="background-color: #00FF00; width: 100px; height: 100px;">
      GREEN Color
    </div>
    <!-- Blue color -->
    <div style="background-color: #0000FF; width: 100px; height: 100px;">
      BLUE Color
    </div>
  </body>
</html>

استفاده از رنگ‌های HEX در HTML

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

مثال ۱: استفاده از ویژگی style

در اینجا مثالی از اختصاص یک رنگ HEX به یک عنصر HTML با استفاده از ویژگی style آورده شده است:

<body>
  <p style="color: #FF0000;">This text is red.</p>
</body>

مثال ۲: استفاده از تگ style

در اینجا مثالی از اختصاص یک رنگ HEX به یک عنصر HTML با استفاده از تگ style آورده شده است:

<head>
  <style>
    p {
      color: #FF0000;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>

کدهای رنگ HEX برای رنگ‌های رایج

جدول زیر چند نمونه از رنگ‌ها را همراه با کدهای شانزده‌شانزدهی آن‌ها نشان می‌دهد:

نمونه‌هایی از رنگ‌های HEX

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

تنظیم رنگ پس‌زمینه بدنه صفحه

در مثال زیر، رنگ پس‌زمینه صفحه HTML را با استفاده از کد رنگ HEX تعریف می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML Colors by HEX code
   </title>
</head>
<body style="background-color: #00FF00;">
   <p>
      Use different color code for body 
      and table and see the result. 
   </p>

   <p style="color: #FFFFFF;">
      This text will appear white on 
      black background. 
   </p>
</body>
</html>

تنظیم رنگ سلول‌های جدول

در مثال زیر، رنگ پس‌زمینه عنوان H2 و جدول را تعریف می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML HEX Color code
   </title>
</head>
<body style="width:300px; height:100px;">
   <h2 style="background-color: #FF6666;">
      Setting the Background using HEX Code 
   </h2>
   <table style="background-color: #FF3335;">
      <tr>
         <td style="color: #FFFFFF;">
               The text color of the paragraph is 
               styled using HEX code.
         </td>
      </tr>
   </table>
</body>
</html>

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