<color>

از نوع داده ای <color> برای تعریف رنگ ها در سی اس اس استفاده می شود.

رنگ ها می توانند یک کلمه کلیدی باشند, یا دسته ای از اعداد و یا آنها را می توان از طریق فرمت های متفاوت که در ادامه آمده اند معرفی کرد.

 

کلمات کلیدی

گاهی می توان از یک رنگ با استفاده از کلمه کلیدی تعریف شده برای آن در سی اس اس استفاده کرد. به عنوان نمونه کلمات کلیدی balck, white و غیره…

در لیست زیر 147 رنگی که در سی اس اس در دسترس هستند آورده شده است:

 

See the Pen css color keywords by Mojtaba Seyedi (@seyedi) on CodePen.

 

همچنین این ابزار دسترسی به رنگ ها و نام آنها را کمی ساده تر کرده است:

• CSS Color Names

نمونه هایی از استفاده از این رنگ ها:

 

div {
  background-color: khaki;
  color: azure;
  border: 1px solid red;
}

 

 

transparent

با استفاده از این کلمه کلیدی می توان یک رنگ کاملا شفاف را به وجود آورد. به عنوان مثال اگر از این کلمه کلیدی برای پس زمینه یک باکس استفاده کنیم می توان پشت آن باکس را دید. ( یعنی همان شیشه خیلی خیلی تمیز خودمان :) )

نمونه ها:

 

div {
  background-color: transparent;
  outline: 1px solid transparent;
}

 

 

currentColor

رنگی که برای ویژگی color تعریف می شود را می توان از طریق این کلمه کلیدی برای ویژگی های دیگر همان عنصر یا عنصر فرزند آن استفاده کرد.

فرض کنید می خواهیم رنگی که برای متن عنصر تعریف شده است را برای حاشیه آن نیز تعریف کنیم:

 

.dad {
  color: green;
  border: 10px dashed currentColor; /* = green */
}

 

و یا برای فرزند عنصر هم می توان بصورت زیر عمل کرد به شرطی که ویژگی color برای عنصر فرزند تعریف نشده باشد:

 

.dad {
  color: green;
  border: 10px dashed currentColor; /* = green */
}

.boy {
  background-color: currentColor; /* = green */
}

 

اما اگر خود عنصر فرزند ویژگی color داشته باشد خواهیم داشت:

 

.dad {
  color: green;
  border: 10px dashed currentColor; /* = green */
}

.boy {
  color: red;
  background-color: currentColor; /* = red */
}

 

 

رنگهای RGB

RGB کوتاه شده کلمات قرمز, سبز و آبی می باشد. برای استفاده از این فرمت در سی اس اس سه راه وجود دارد:

• rgb#
• ()rgb
• ()rgba

 

هگزادسیمال (rgb#)

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

 

 

کاراکترهایی که مجاز هستند شامل 0 تا 9 و همینطور حروف a تا f که در دستگاه اعداد شانزده شانزدهی a نشان دهنده عدد 10 و f همان عدد 15 می باشد.

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

اگر تمام جفت ها بصورت کاراکترهای تکراری باشند می توان یکی از کاراکترهای هر جفت را حذف کرد و نتیجه یکسان داشت:

 

#88ee00 = #8e0
#ffffff = #fff
#000000 = #000
#dddddd = #ddd

 

مثالی برای استفاده از این روش:

 

div {
  color: #0f0;
  border: 10px dashed #1aff00;
}

 

در دموی زیر می توانید با تغییر رنگ ها به درک بهتر موضوع کمک کنید:

 

See the Pen hex colors by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

()rgb

استفاده از تابع rgb() بطور کامل در این مطلب توضیح داده شده است.

 

()rgba

استفاده از تابع rgba() بطور کامل در این مطلب توضیح داده شده است.

 

رنگهای HSL

برای استفاده از فرمت HSL دو تابع وجود دارد که می توانید به مطلب مربوط به هر کدام مراجعه کنید:

• hsl()
• hsla()

 

کد رنگی هشت رقمی

در سی‌اس‌اس می‌توان از چهار یا هشت رقم نیز برای نمایش رنگی که دارای شفافیت هست استفاده کرد، برای این موضوع می‌توانید این مطلب را مطالعه کنید.

 

پشتیبانی مرورگر ها

مقادیر رنگی در تمام مرورگرهای اصلی پشتیبانی می شود.

اما hsl(), hsla(), rgba(), transparentو currentColor از اینترنت اکسپلورر نسخه 9 به بعد (شامل 9) پشتیبانی می شوند.