CSS – رنگ‌های HEX (HEX Colors)

رنگ‌های HEX در CSS (HEX Colors)

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

مقدار HEX (HEX Value)

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

#rrggbb

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

  • مثال:
    • رنگ قرمز به صورت #ff0000 نمایش داده می‌شود، زیرا مقدار قرمز در بالاترین سطح (ff) و دو رنگ دیگر در پایین‌ترین سطح (00) تنظیم شده است.
    • برای نمایش رنگ مشکی، همه مقادیر را به 00 تنظیم کنید: #000000.
    • برای نمایش رنگ سفید، همه مقادیر را به ff تنظیم کنید: #ffffff.

ترکیب رنگ‌های HEX:

مثال‌ها:

#ff0000   /* رنگ قرمز */
#0000ff   /* رنگ آبی */
#3cb371   /* رنگ سبز تیره */
#ee82ee   /* رنگ بنفش روشن */
#ffa500   /* رنگ نارنجی */
#6a5acd   /* رنگ آبی مایل به بنفش */

طیف‌های خاکستری (Shades of Gray)

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

مثال:

#3c3c3c  /* خاکستری تیره */
#616161  /* خاکستری متوسط */
#787878  /* خاکستری روشن */
#b4b4b4  /* خاکستری روشن‌تر */
#f0f0f0  /* خاکستری خیلی روشن */
#f9f9f9  /* تقریباً سفید */

مقدار HEX سه رقمی (3 Digit HEX Value)

گاهی اوقات در کد CSS یک کد هگزادسیمال 3 رقمی دیده می‌شود.

کد هگزادسیمال 3 رقمی یک شکل مختصر برای برخی از کدهای 6 رقمی است.

فرمت کد هگزادسیمال 3 رقمی به صورت زیر است:

#rgb

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

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

مثال:

body {
  background-color: #fc9; /* معادل #ffcc99 */
}

h1 {
  color: #f0f; /* معادل #ff00ff */
}

p {
  color: #b58; /* معادل #bb5588 */
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.