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

علیرضا حاتمی نیا 1395/9/24 1849

سلامی دوباره خدمت شما علاقه مندان  آموزش طراحی وب
علیرضا حاتمی نیا هستم و در خدمت شما عزیزان هستم با یکی دیگر از آموزش های طراحی وب
در این آموزش شما با رنگ ها در وب و نحوه تعریف یک رنگ در صفحه وب توسط 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;
}


لیست نام رنگ ها را می توانید از لینک زیر پیدا کنید :


http://www.w3schools.com/colors/colors_names.asp

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


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);
}


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

دانلود pdf قسمت سیزدهم آموزش طراحی وب

دانلود ویدیو
 

قسمت بعدی قسمت قبلی