color 333

کاربرد رنگ و روانشناسی رنگ در طراحی وب -بخش دوم

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

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

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

روش اول برای انتخاب رنگ استفاده مستقیم از نام آنها می‌باشد.در مثال ذیل ما با استفاده از مشخصه ی style در داخل تگ <div> رنگ پشت زمینه را تغییر دادیم. همانطور که مشاهده می کنید ، در این مثال نام رنگ را بصورت مستقیم آوردیم.

مثال :

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

روش دوم در انتخاب رنگها استفاده از سبک رنگ دهی RGB می‌باشدکه مانند مثال زیر عمل می‌کنیم.

مثال :

 

اگر در کد بالا دقت کنید میبینید که درون پرانتز rgb() از سه قسمت استفاده کردیم. این سه قسمت به ترتیب از چپ به راست ، میزان قرمزی و سبزی و آبی بودن رنگ را تعیین می‌کند .

هر سه قسمت می‌تواند عددی بین ۰ تا ۲۵۵ را شامل شود.

صفر یعنی رنگ مطلق و ۲۵۵ یعنی بی رنگی مطلق و خوب مثلا اگر ما بخواهیم قرمز مطلق را بسازیم باید rgb(255,0,0) را وارد کنیم و یا جهت تعیین رنگ سیاه هم باید کد rgb(255,255,255) را وارد کنیم.

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

روش سوم هم روش rgba() می‌باشد که شبیه به روش rgb است ، با این تفاوت که در این روش مقدار چهارمی هم جهت تعیین شفافیت به رنگ ها وجود دارد. این مقدار می‌تواند  مقداری بین صفر تا یک باشد که هر چه این مقدار به یک نزدیکتر باشد شفافیت کمتر و هر چه به صفر نزدیک شود شفافیت بیشتر خواهد بود.  مثلا کد rgba(255,0,0,0.3) جهت تعیین رنگ قرمز با شفافیت زیاد است.

مثال :

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

روش چهارم روش  hex color یا رنگ‌های  هگزا دسیمال می‌باشد که بر مبنای ۱۶ کار می کند. در جدول زیر اعداد مبنای ۱۶ را به اختصار آوردیم.

۰۱۲۳۴۵۶۷۸۹abcdef

برای تعیین رنگبندی بر مبنای ۱۶ در ابتداعلامت # را  تایپ می‌کنیم و سپس دو رقم اول را برای تعیین شدت رنگ قرمز ، و بعد از آن  دورقم دوم جهت تعیین شدت رنگ سبز ، و در آخر هم دو رقم سوم برای تعیین شدت رنگ آبی مشخص می‌کنیم.

مثلا وقتی ما میخواهیم رنگ قرمز کامل را داشته باشیم بر اساس جدول دو رقم اول را ff می گذاریم که بالاترین رقم می‌باشد و بقیه را صفر قرار می دهیم.

در این روش ما نمی‌توانیم  شفافیت را تعیین کنیم.

مثال :

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

روش پنجم هم در تعیین رنگ، روش  HSL می‌باشد که در این روش پارامتر  اول درجه رنگ را مشخص می کند. مثلا اگر ما در پارامتر  اول عدد ۱۲۰ را وارد کنیم  رنگ سبز را انتخاب کردیم. همچنین در پارامتر دوم اشباع رنگ تعیین می‌شود و در پارامتر  سوم هم  روشنی رنگ را مشخص می‌کنیم .عدد صفر تاریک ترین رنگ آن درجه می‌باشد.

مثال :

 

در شکل ذیل درجه بندی‌های  مربوط به سبک HSL قابل مشاهده است.

hsl

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

روش ششم هم روش  HSLA می‌باشد که همانند روش HSL است ، با این تفاوت که یک مقدار عنوان پارامتر چهارم جهت تعیین شفافیت می‌توانیم  وارد کنیم.

مثال :

 

معرفی رنگ‌های  امن در وب

در سالهای پیش که کامپیوترها حداکثر ۲۵۶ رنگ را پشتیبانی می کردند و استفاده از تنوع رنگی به دلیل نبود سخت افزار مناسب کار سختی بود  ، توسط کنسرسیوم جهانی وب ۲۱۶ رنگ بعنوان استانداردی برای رنگ بندی تعیین شده و ۴۰ رنگ از بین این ۲۱۶ رنگ بعنوان رنگ های سیستمی رزرو گردید.

این لیست را رنگ های امن وب یا Web Safe نامیدند.

این لیست رنگی عملا در غالب سیستم ها قابلیت اجرایی داشت. البته این لیست نیز در اجرا محدودیت ها و ضعف هایی داشت.

رنگ ها در این لیست بر مبنای هگزادسیمال هستند.

امروزه همه کامپیوترها و حتی تبلت ها و موبایل ها از چندین میلیون رنگ (کامپیوترها ۲۴ بیت رنگی و موبایلها ۱۶ بیت رنگی ) پشتیبانی می کنند ، و عملا استفاده از لیست رنگ های امن مرسوم نیست.

در جدول شکل ذیل ،  جدول رنگ‌های پرکاربرد و امن در دنیای وب  قابل مشاهده است. 

websafecolor1 websafecolor2

 معرفی سایت های معتبری که به رنگ بندی و طراحی سایتتان کمک بسیار خوبی هستند :

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

سایت عالی برای شما که میخواهید از الگوهای بسیار عالی رنگ بندی اطلاع پیدا کنید. این سایت به شما امکان می دهد تا رنگ های مکمل ، متضاد و مشابه رنگ دلخواه خود را بیابید و به یک ترکیب عالی برای رنگ بندی سایتتان برسید. همچنین در این سایت میتوانید با حرکت ماوس رنگ دلخواهی را با سرعت هرچه تمامتر انتخاب نمایید.

در آخر هم در صورت نیازتان میتوانید ترکیب رنگ بندی را تحت فایل های .scss یا .less و یا permalink و یا png درافت کنید.

color code site

یک سایت عالی دیگر برای رسیدن به بهترین طرح و رنگ بندی سایت . این سایت قبلا با نام Kuler شناخته میشد.

 این سایت نیز با ابزار عالی خود به شما امکان می دهد رنگ های مشابه ، متضاد و مکمل را برای رنگ مورد نظرتان تعیین نمایید.

امکان دیگر این سایت دسترسی به الگوهای بسیاری است که این سایت پس از کاوش و جستجو در بین سایت های دیگر به شما میدهد.

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

adobe color cc

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

colour lovers

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

color seeds

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

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

اگر به طراحی سایتتان اهمیت قائل باشید ، حتما به این سایت سر خواهید زد.

awwards site

 

سایت https://dribbble.com/ :

این سایت نیز سایت خوبی است در زمینه ی طراحی که میتواند الگوی بسیار مناسبی را در زمینه های مختلف طراحی مثل تایپوگرافی ، ترکیب رنگ و غیره در اختیار شما بگذارد.

driibble site

 

علی امیدوار

مهندس کامپیوتر هستم و عاشق یادگیری و آموزش. مدیر سایت 20آموز .

نوشته های دیگر نویسنده

0 پاسخ

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

پاسخ دهید