رنگ ها در CSS

برای اضافه کردن رنگ به المان های HTML باید از CSS استفاده کنیم.

به وسیله CSS می توان رنگ پس زمینه (background-color)، متن (color) و ... را تغییر داد.

در CSS برای مشخص کردن رنگ چهار روش وجود دارد:

• اسامی قابل درک مانند red , blue و ...
• RGB
• HEX
• HSL

.h1-style {
   color: yellow;
}

با ویژگی background-color می توان رنگ پس زمینه المان ها را تغییر داد.

این متن دارای پس زمینه زرد است.

<p style="background-color: yellow;">آموزش برنامه نویسی PNLdev</p>

با ویژگی color می توان رنگ متن ها را تغییر داد.

رنگ این متن قرمز است.

<p style="color: red;">آموزش برنامه نویسی PNLdev</p>

برای رنگ آمیزی در CSS می توان از نام رنگ استفاده کرد.

نکته: به تعداد 140 نام رنگ در CSS وجود دارد.

RGB مخفف Red - Green - Blue است. در واقع RGB از ترکیب 3 رنگ پایه قرمز، سبز، آبی، رنگ ها را می سازد.

color: rgb(Red, Green, Blue);

در کد بالا روش استفاده از RGB نمایش داده شده است. به جای مقادیر Red، Green، Blue از یک عدد بین 0 تا 255 باید استفاده کرد.

نکته: هر چه از عدد 0 به 255 نزدیک تر می شویم. رنگ غلیظ تر(پر رنگ تر) می شود.

.h1-style {
   color: rgb(255 , 0 , 0);
}

HEX مخفف Hexdecimal یا اعداد شانزده تایی است. در واقع رنگ HEX از ترکیب 3 رنگ پایه قرمز، سبز، آبی، رنگ ها را می سازد.

نکته: هگز دسیمال نوعی مبنا عددی است. برخلاف اعداد ده دهی (مبنا 10)، اعداد هگزدسیمال شانزده شانزدهی (مبنا 16) دسته بندی می شوند.

 نکته: مقادیر هگز شامل 0 1 2 3 4 5 6 7 8 9 a b c d e f است.(از 0 تا f مجموعا 16 عدد وجود دارد)

color: #rrggbb;
color: #rgb;

در کد بالا روش استفاده از Hex نمایش داده شده است. به جای هر یک از مقادیر r، g، b باید از یک مقدار هگز استفاده کرد.

color: #000000; /* مشکی */ 
color: #000; /* مشکی */

.h1-style {
   color: #ff0000;
}

نکته: مقدار هگز با # (هش) شروع می شود.

نکته: هر چه از عدد 0 به f نزدیک تر می شویم. رنگ غلیظ تر(پر رنگ تر) می شود.

HSL مخفف:

• Hue یا رنگ: درجه رنگ - از 0 تا 360 درجه
  • 0 قرمز
  • 120 سبز
  • 240 آبی
• Saturatuin یا اشباع: درصد شدت رنگ - از 0 تا 100 درصد
  • 0 بی رنگ
  • 100 پررنگ
• Lightness روشنایی: درصد روشنایی - از 0 تا 100 درصد
  • 0 مشکی
  • 50 عادی
  • 100 سفید

color: hsl(hue, saturation, lightness);

در کد بالا روش استفاده از HSL نمایش داده شده است.

.h1-style {
   color: hsl(0, 100%, 50);
}

color: hsl(0, 100%, 50%); /* قرمز */
color: hsl(120, 100%, 50%); /* سبز */
color: hsl(240, 100%, 50%); /* آبی */

یه وسیله کانال آلفا می توان میزان شفافیت (opacity) رنگ ها را مشخص کرد.

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

• رنگ rgb با آلفا ترکیب و rgba() را می سازد. مقدار آلفا در rgba یک عدد از 0 تا 1 است.
• رنگ hex با آلفا ترکیب #rrggbbaa و #rgba را می سازد. مقدار آلفا در hex یک عدد از 0 تا f است.
• رنگ hsl با آلفا ترکیب و hsla() را می سازد. مقدار آلفا در hsla یک عدد از 0 تا 1 است.

background-color: rgba(255, 0, 0, 0);
background-color: rgba(255, 0, 0, 0.5);
background-color: rgba(255, 0, 0, 1);

background-color: #f000;
background-color: #f007;
background-color: #f00f;

background-color: #ff000000;
background-color: #ff000077;
background-color: #ff0000ff;
        
background-color: hsla(0 , 100%, 50%, 0);
background-color: hsla(0 , 100%, 50%, 0.5);
background-color: hsla(0 , 100%, 50%, 1);

نکته: کانال آلفا (Alpha) با مقدار 0 کاملا شفاف و با مقدار 1 یا f بدون شفافیت است.