انتخاب بهترین رنگ برای وبسایت

رنگ ها :

رنگ ها عناصر بسیار مهمی در طراحی وبسایت هستند. در HTML5 و CSS3 برای نام رنگ ها 140 مقدار تعریف شده است که از این میان 17 رنگ برای مشخصات HTML و 123 رنگ برای مشخصات CSS می باشند. جدول زیر 17 رنگ مشخصات HTML را نشان می دهد.

انتخاب بهترین رنگ برای وبسایت

انواع مقداردهی رنگ ها

برای مقدار دهی رنگ ها 4 روش وجود دارد.

1) استفاده از نام رنگ، مانند red

2) استفاده از فرمت هگزا دسیمال 3 رقمی، مانند #F00

3) استفاده از فرمت هگزا دسیمال 6 رقمی، مانند #FF0000

4) استفاده از فرمت RGB، مانند rgb(255,0,0)

توجه داشته باشید که هر 4 روش فوق رنگ قرمز را تولید می کنند و هیچ تفاوتی از لحاظ خروجی با یکدیگر ندارند.

با یک استنباط کوچک از استاندارد RGB به این موضوع پی خواهیم برد که با استفاده از این استاندارد می توان 16 میلیون رنگ را تولید کرد اما اکثر مانیتورهای جدید توانایی تفکیک رنگ تا 16384را دارند.

در نگاه اول به این حجم از رنگ شاید در انتخاب رنگ برای عناصر خود دچار سردرگمی شوید اما نگران این مسئله نباشید چرا که از بین این تعداد رنگ تنها 216 نوع رنگ برای استفاده در صفحات وب مناسب هستند. اما این بدان معنا نیست که از رنگ های دیگر نمی توانید استفاده کنید، این 216 رنگ در واقع رنگ هایی هستند که در اکثر سیستم ها و دستگاه ها یک نوع نمایش را دارند.

رنگ های مناسب برای طراحی وب به همراه کد هگزا دسیمال 6 رقمی

در جدول زیر 216 رنگ را مشاهده می کنید که برای استفاده در صفحات وب بسیار مناسب هستند.

چگونه بهترین رنگ را برای وب سیات انتخاب کنیم

چگونه رنگ وبسایت را انتخاب کنیم؟

انتخاب رنگ های مناسب در طراحی وب سایت بسیار مهم است و نباید به آن بی توجه باشید. انتخاب رنگ های ناجور و نامتناسب  همانند یک وب سایت بی محتوا می تواند کسل کننده باشد شاید وب سایتی طراحی کرده باشید که سرعت بالایی دارد این خیلی خوب است اما اگر در همین وب سایت از رنگ های نامناسب در کنار یکدیگر استفاده کرده باشید آنگاه صفحات شما به همان اندازه یک وب سایت کم سرعت کسل کننده هستند! بنابراین از قدرت رنگ ها در موفقیت وب سایت خود غافل نشوید. حتی با وجود 216 رنگی که در اختیار شما قرار دارند پیدا کردن دو رنگ که قرار دادن آنها در کنار یکدیگر ترکیب چشم نوازی بیافریند کار آسانی نیست. وقتی که قرار است از رنگ ها در کنار یکدیگر استفاده کنید و در عین حال آرایش درستی هم داشته باشید یا به اصطلاح هارمونی رنگ ها را رعایت کنید می توانید از شش الگوی پیشنهادی که عبارتند از: تکفام- آنالوگ- مکمل- مکمل شکسته- سه تایی- آرایش چهارتایی استفاده نمایید.

آرایش رنگ تکفام

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

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

انتخاب رنگ وب سایت در سال 98

الگوری آرایش رنگ تکفام

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

رنگ وبسایت در سال98

 

رنگ برتر وب سایت در سال 98

 

بهترین رنگ برای وب سایت

آرایش رنگ آنالوگ

آرایش رنگ آنالوگ معمولاً از رنگ هایی ساخته شده است که در چرخ رنگ 12 رنگه مانند روبرو دقیقا کنار یکدیگر قرار گرفته اند. اما نقطه ضعف این آرایش هم کمبود کننتراست است.

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

الگوی آرایش رنگ آنالوگ

الگوی آرایش رنگ آنالوگ

مثال: در زیر 3 نمونه از طراحی  با آرایش رنگ آنالوگ ساخته شده است.

طراحی رنگ وب سایت

 

برترین رنگ طراحی سایت 2019

 

آرایش رنگ آنالوگ وب سایت 2019

 

آرایش رنگ مکمل

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

الگوی آرایش آنالوگ وب سایت 98

الگوی آرایش رنگ مکمل

مثال: در زیر 3 نمونه از طراحی  با آرایش رنگ مکمل ساخته شده است.

الگوی آرایش رنگ مکمل

 

الگوی آرایش رنگ مکمل 2019

 

آرایش رنگ مکمل 98

 

آرایش رنگ مکمل شکسته

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

برای شروع می توانید از یک رنگ شروع کنید و سپس چرخ رنگ را به سه قسمت مساوی تقسیم کنید رنگ مورد نظر شما در یکی از این سه ناحیه قرار می گیرد و دو رنگ بعد را از دو ناحیه باقی مانده انتخاب نمایید. یا اگر بخواهیم به ساده ترین شکل بگویم می توانید از الگوی Y انگلیسی برای تعیین رنگ ها استفاده نمایید.

الگوی آرایش رنگ مکمل شکسته

الگوی آرایش رنگ مکمل شکسته

مثال: در زیر 3 نمونه از طراحی  با آرایش رنگ مکمل شکسته ساخته شده است.

الگوی آرایش رنگ مکمل شکسته 98

 

الگوی آرایش رنگ مکمل شکسته 2019

 

نمونه کار الگوی رنگ مکمل شکسته

 

آرایش رنگ سه تایی

همانطور که از نام آن مشخص است این آرایش سه رنگ که با زاویه 120 درجه از یکدیگر قرار گرفته اند استفاده می کند. در شکل بالا این نقاط با سه مثلث متساوی الساقین نمایش داده شده است. در چرخ رنگ 12 مرحله ای بالا همانطور که مشاهده می کنید حتی اگر رنگ های غیر اشباع استفاده کنید می توانید رنگ ها را نسبت به هم به صورتی برجسته نمایش دهید.

الگوی آرایش رنگ سه تایی

الگوی آرایش رنگ سه تایی

الگوی رنگ چهارتایی

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

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

الگوی انتخاب رنگ 4 تایی

الگوی آرایش رنگ چهار تایی

پژوهش: وب سایت های معتبر اینترنتی را چک و سعی کنید تشخیص دهید از چه الگو و آرایش رنگی استفاده کرده اند.

چرخه رنگ برای طراحی سایت

چرخه ی رنگ

رنگ های ویژه برای طراحی

رنگ های ویژه برای طراحی سایت

انواع سیستم های رنگی (Color Modes)

انواع سیستم های رنگی در طراحی سایت

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

سیستم های رنگی در طراحی سایت 2019

 

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

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