رنگ‌های HEX در CSS

مقدار HEX

یک رنگ هگزادسیمال (hexadecimal) به این صورت مشخص می‌شود: #RRGGBB.

در CSS، یک رنگ را می‌توان با استفاده از یک مقدار هگزادسیمال در این فرمت تعریف کرد: #rrggbb

که در آن rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمال بین 00 و ff هستند (معادل دسیمال 0-255).

• برای مثال، #ff0000 به رنگ قرمز نمایش داده می‌شود، زیرا مقدار قرمز روی بالاترین حد خود (ff) و بقیه روی پایین‌ترین حد (00) تنظیم شده‌اند.

• برای نمایش رنگ مشکی، تمام مقادیر را روی 00 تنظیم کنید: #000000.

• برای نمایش رنگ سفید، تمام مقادیر را روی ff تنظیم کنید: #ffffff.

با ترکیب مقادیر HEX زیر، نتیجه را آزمایش کنید:

#ff6347

• RED: ff

• GREEN: 63

• BLUE: 47

مثال:

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

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

طیف‌های رنگ خاکستری معمولاً با استفاده از مقادیر یکسان برای هر سه مؤلفه رنگ تعریف می‌شوند:

مثال:

#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9

مقدار HEX سه‌رقمی

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

کد هگز سه‌رقمی این فرمت را دارد: #rgb

که در آن r، g و b نمایانگر مؤلفه‌های قرمز، سبز و آبی با مقادیری بین 0 و f هستند.

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

مثال:

در کدهای زیر، از مقادیر هگز سه‌رقمی استفاده شده و معادل شش‌رقمی آن‌ها در بخش توضیحات (کامنت) نوشته شده است.

body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}