آموزش رنگ ها در CSS | آموزش کامل + نمونه کد

قبلی بعدی

رنگ ها در CSS

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

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

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

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

.h1-style {
   color: yellow;
}

رنگ پس زمینه (background-color) در CSS

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

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

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

رنگ متن (color) در CSS

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

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

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

نام رنگ ها در CSS

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

red

green

yellow

gray

purple

white

black

brown

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

RGB در CSS

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

color: rgb(Red, Green, Blue);

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

rgb(0, 0, 0)

قرمز

سبز

آبی

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

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

HEX در CSS

HEX مخفف Hexadecimal یا اعداد شانزده تایی است. در واقع رنگ 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; /* مشکی */

#000000

قرمز

سبز

آبی

.h1-style {
   color: #ff0000;
}

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

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

HSL در CSS

HSL مخفف:

Hue یا رنگ: درجه رنگ - از 0 تا 350 درجه
- 0 قرمز
- 120 سبز
- 240 آبی

Saturatuin یا اشباع: درصد شدت رنگ - از 0 تا 100 درصد
- 0 بی رنگ
- 100 پررنگ

Lightness روشنایی: درصد روشنایی - از 0 تا 100 درصد
- 0 مشکی
- 50 عادی
- 100 سفید

color: hsl(hue, saturation, lightness);

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

hsl(0, 0%, 0%)

hue

saturation

lightness

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

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

کانال آلفا یا شفافیت (Alpha Channel or Opacity CSS) در CSS

یه وسیله کانال آلفا می توان میزان شفافیت (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 بدون شفافیت است.

خلاصه درس

در این درس با رنگ ها در CSS:

رنگ پس زمینه ( background-color)
رنگ متن (color)
نام رنگ ها
RGB
HEX
HSL
کانال آلفا یا شفافیت (Alpha Channel or Opacity)

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی