آشنایی و تعریف رنگ ها در HTML , CSS

علیرضا حاتمی نیا 6853

سلامی دوباره خدمت شما علاقه مندان  آموزش طراحی وب. علیرضا حاتمی نیا هستم و در خدمت شما عزیزان هستم با یکی دیگر از آموزش های طراحی وب.
در جلسه قبل با اصول کدنویسی در CSS آشنا شدید. در این قسمت از آموزش به معرفی رنگ ها در وب و نحوه تعریف یک رنگ در CSS می پردازیم.

انتخاب رنگ در صفحه وب

اولین و مهمترین استایلی که شما برای یک صفحه وب به کار می برید انتخاب رنگ برای تمامی اجزای صفحه است. زیرا این رنگ ها هستند که کاربران را به سایت شما جذب می کنند و اعتبار سایت شما را در نگاه اول در ذهن بیننده تعیین می کند.
رنگی که برای طراحی وبسایت در نظر می گیرید باید براساس روانشناسی کاربران انتخاب شده باشد. مثلا برای یک وبسایت پزشکی معمولا از رنگ های آبی یا سفید استفاده می کنند یا برای وبسایتهای موزیک از رنگ های داغ و شاد استفاده می شود.
اما در CSS چگونه رنگ ها برای استایل های مورد نظر تعریف می شوند؟

استفاده از رنگ ها در وب توسط CSS

رنگ ها در وب ترکیبی از سه رنگ اصلی قرمز Red، آبی Blue و سبز Green می باشند. مثلا اگر رنگ آبی و سبز را باهم ترکیب کنیم حاصل رنگ فیروزه ای خواهد شد یا از ترکیب رنگ قرمز و سبز رنگ زرد به وجود می آید.

در وب به شیوه های مختلفی از رنگ ها برای تغییر رنگ استایل های مورد نظر استفاده می شود

  1. توسط نام رنگ
  2. توسط مقدار RGB
  3. توسط مقدار یا کد هگزا دسیمال یا hexadecimal
  4. توسط مقدار HSL (CSS3)
  5. توسط مقدار HWB (CSS4)

1-  استفاده از نام رنگ

سی اس اس(CSS) از 140 نام رنگ پشتیبانی می کند. مثلا برای رنگ زرد عبارت yellow یا برای آبی روشن light-blue را استفاده می کنیم. در کد زیر رنگ متن را برای کلاس sample به رنگ صورتی تغییر داده ایم :

.sample {
Color: pink;
}


لیست نام رنگ ها به طور کامل موجود است و می توانید از آنها استفاده کنید. البته استفاده از نام رنگ ها بعلت محدودیت و تاثیر سرعت بر روی برنامه زیاد پیشنهاد نمی شود.

2- استفاده از مقدار هگزا دسیمال

کلیه رنگ ها با یک کد هگزا دسیمال (اعداد در مبنای 16) در وب قابل شناسایی هستند. مقدار هگزادسیمال در تمامی مرورگرها پشتیبانی می شود.
مقدار هگزا دسیمال اینگونه مشخص می شود:

#RRGGBB

مقدارها RR(Red) و BB(Blue) و GG(Green) اعداد صحیحی هستند که از 0 تا 9 و A تا F مقداردهی می شوند. مقدار A تا F همان اعداد 10 تا 15 هستند.

مثال تعیین کدرنگ به روش هگزا دسیمال

رنگ آبی مطلق به این صورت مشخص می شود : #0000FF یعنی مقدار قرمز و سبز 0 و مقدار آبی هم آخرین سطح یعنی F است.
مقدارهگزادسیمال هر رنگ را می توانید به صورت دستی یا از نرم افزارهای گرافیکی مختلفی که بهترین آنها فتوشاپ است پیدا کنید. ابتدای مقدار هگزادسیمال را با استفاده از یک شارپ # در ابتدای آن مشخص می کنند.
برای مثال کد رنگ سفید #FFFFFF و کد رنگ نوعی بنفش #ad408f می باشد.

 

.sample {
Color: #ad408f;
}


 

آموزش استفاده از رنگ ها

3-  استفاده از مقدار RGB

مقدار رنگ RGB توسط کلیه مرورگرها پشتیبانی می شود.
یک مقدار رنگ RGB در CSS اینگونه مشخص می شود :

 

 RGB(Red,Green,Blue)

میزان هر یک از مقادیر Red,Bule,Green با اعداد صحیح بین 0 تا 255 مشخص می شود و نتیجه رنگی ترکیب شده از این سه رنگ می شود. (یعنی از مشکی یا 0 شروع شده و تا 255 که رنگ اصلی هست مایل می شود)
مثلا سبز مطلق این گونه می شود rgb(0,255,0) (مقدار قرمز و آبی عدد 0 تعیین شده است)

.sample {
Color: rgb(0,255,0);
}


خب دوستان آموزش این قسمت از طراحی وب هم به پایان رسید. امیدوارم مفید واقع شده باشد.

کلمات کلیدی

لینک های مرتبط

طراحی سایت اصفهان
علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت