انتخاب رنگ مناسب برای طراحی سایت با استفاده از چرخه رنگ‌ها

انتخاب رنگ مناسب برای طراحی سایت دغدغه بسیاری از مدیران و طراحان وب‌سایت هست. در این آموزش با استفاده از چرخه رنگ نیوتون، یک طیف رنگی مناسب برای طراحی سایت انتخاب می‌کنیم.

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

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

چرخه رنگ نیوتون چیست؟

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

منطق ساده دایره رنگ‌ها

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

چرا این ترکیب‌ها خوب جواب می‌دن؟ چون رنگ‌های روبه‌روی هم بیشترین تضاد رو با هم دارن. وقتی کنار هم قرار می‌گیرن، همدیگه رو برجسته‌تر نشون می‌دن و چشم مخاطب راحت‌تر بینشون تفکیک قائل می‌شه.

چرا انتخاب رنگ در طراحی سایت این‌قدر مهم است؟

تأثیر رنگ روی حس کاربر و هویت برند

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

اشتباه‌های رایج در رنگ‌بندی سایت

چند تا اشتباه هست که خیلی زیاد می‌بینیم:

• استفاده از رنگ‌های خیلی زیاد. وقتی هفت هشت تا رنگ توی یه صفحه بذارید، عملاً هیچ‌کدوم دیده نمی‌شن.
• انتخاب رنگ بر اساس سلیقه شخصی. اینکه شما بنفش دوست دارید دلیل نمی‌شه سایت فروش لوازم صنعتی بنفش باشه.
• بی‌توجهی به کنتراست. متن خاکستری روی زمینه خاکستری روشن شاید توی فتوشاپ قشنگ باشه، ولی کاربر نمی‌تونه بخونتش.
• نداشتن رنگ شاخص برای دکمه‌ها. اگه دکمه‌های مهم سایت توی رنگ‌های بقیه صفحه گم بشن، نرخ تبدیل پایین میاد.

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

قبل از اینکه بریم سراغ ابزار، بهتره همه‌تون با انواع هارمونی آشنا بشید. هارمونی یعنی الگویی که بر اساسش رنگ‌ها رو از روی دایره برمی‌دارید. بسته به اینکه سایتتون چه حال‌وهوایی داره، ممکنه هر کدوم از این حالت‌ها برای شما جواب بده.

هارمونی مکمل (Complementary)

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

هارمونی مکمل تفکیکی (Split Complementary)

اینجا به جای رنگ روبه‌رویی، دو تا رنگ کنارش رو برمی‌دارید. نتیجه‌ش نرم‌تر از حالت قبلیه ولی هنوز تضاد خوبی داره. اگه تازه‌کار هستید، این گزینه ریسک کمتری داره.

هارمونی مثلثی (Triadic) — گزینه پیشنهادی ما

سه تا رنگ که روی دایره با فاصله مساوی از هم قرار گرفتن و یه مثلث متساوی‌الاضلاع می‌سازن. به نظر ما این بهترین انتخاب برای وب‌سایته، چون هم تنوع کافی داره و هم رنگ‌ها با هم دعوا نمی‌کنن. عملاً یه رنگ اصلی و دو تا رنگ مکمل تحویلتون می‌ده که برای اکثر سایت‌ها کاملاً کافیه.

هارمونی مشابه (Analogous)

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

هارمونی تک‌رنگ (Monochromatic)

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

هارمونی مربعی و مستطیلی (Tetradic)

چهار تا رنگ که روی دایره یه مربع یا مستطیل می‌سازن. قدرت زیادی بهتون می‌ده ولی مدیریتش سخته. اگه تجربه کافی ندارید، فعلاً بذاریدش کنار.

آموزش کار با ابزار Color Wheel Calculator

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

ابزاری که پیشنهاد می‌کنیم Color Wheel Calculator هست.

گام اول: ورود به سایت

قبل از هر چیز یه نکته رو بگیم که وقتتون تلف نشه؛ متأسفانه این وب‌سایت ایران رو تحریم کرده. پس برای ورود حتماً باید از سرویس‌های تغییر آی‌پی استفاده کنید.

گام دوم: انتخاب رنگ اصلی

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

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

گام سوم: انتخاب نوع هارمونی

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

گام چهارم: فعال کردن حالت RGB

این نکته رو یادتون نره؛ کادری که زیر دایره رنگ قرار داره رو حتماً روی حالت RGB Mode بذارید. چون خروجی کار شما قراره روی نمایشگر دیده بشه نه روی کاغذ، رنگ‌های RGB خیلی دقیق‌تر و بهتر نمایش داده می‌شن.

گام پنجم: برداشتن کدهای رنگ

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

قانون ۶۰-۳۰-۱۰؛ رنگ‌ها را چطور در سایت پخش کنیم؟

سه تا رنگ گرفتید، عالیه. ولی حالا سؤال مهم‌تر اینه که هر کدوم رو چقدر استفاده کنید؟

یه قانون خیلی ساده توی طراحی داخلی و گرافیک هست به اسم ۶۰-۳۰-۱۰ که برای وب هم فوق‌العاده جواب می‌ده:

• ۶۰ درصد فضا رو به رنگ غالب اختصاص بدید. معمولاً همون رنگ پس‌زمینه و فضاهای خالیه.
• ۳۰ درصد رو به رنگ ثانویه بدید. مثلاً هدر، فوتر، کارت‌ها و باکس‌ها.
• ۱۰ درصد باقی‌مونده مال رنگ تأکیدیه. این همون رنگیه که دکمه‌های مهم، لینک‌ها و بخش‌هایی که می‌خواید حتماً دیده بشن رو باهاش می‌سازید.

اگه این نسبت رو رعایت کنید، حتی با رنگ‌های ساده هم نتیجه تمیزی می‌گیرید.

چند نکته تکمیلی که خیلی‌ها از قلم می‌اندازند

کنتراست و خوانایی متن

قشنگ بودن یه طرف، خونده شدنش یه طرف دیگه. حتماً بعد از انتخاب رنگ‌ها، متن‌ها رو روی پس‌زمینه تست کنید. استاندارد جهانی WCAG می‌گه نسبت کنتراست متن معمولی به پس‌زمینه باید حداقل ۴.۵ به ۱ باشه. ابزارهای آنلاین رایگان زیادی برای اندازه‌گیری این نسبت وجود داره.

دسترسی‌پذیری برای کاربران کم‌بینا و کوررنگ

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

رنگ دکمه‌های فراخوان

دکمه‌های CTA باید بیشترین تضاد رو با محیط اطرافشون داشته باشن. اینجا دقیقاً همون‌جاییه که رنگ مکمل به دردتون می‌خوره. یه دکمه با رنگ مکمل روی پس‌زمینه رنگ اصلی، چشم کاربر رو مستقیم به خودش جذب می‌کنه.

تست کردن قبل از اجرای نهایی

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

چند ابزار جایگزین برای انتخاب پالت رنگی

اگه بعضی از شما به Color Wheel Calculator دسترسی نداشتید یا دنبال گزینه‌های بیشتری بودید، این ابزارها هم کارتون رو راه می‌ندازن:

• Adobe Color: یکی از کامل‌ترین ابزارهای موجود با همه انواع هارمونی و امکان استخراج پالت از روی عکس.
• Coolors: سریع و ساده، با زدن کلید Space پالت‌های جدید تولید می‌کنه.
• Paletton: شبیه به دایره رنگ کلاسیک با امکان پیش‌نمایش روی نمونه صفحه وب.
• Khroma: با کمک هوش مصنوعی و بر اساس سلیقه خودتون پالت پیشنهاد می‌ده.

جمع‌بندی

انتخاب رنگ برای سایت اون هیولایی نیست که فکر می‌کنید. کافیه یه رنگ اصلی داشته باشید، با چرخه رنگ نیوتون رنگ‌های مکملش رو پیدا کنید و بعد با قانون ۶۰-۳۰-۱۰ توی صفحه پخششون کنید. باقی کار هم تست کردن و کمی وسواس روی کنتراست و خوانایی متنه.

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

موفق باشید. 🙂

سوالات متداول

تیم تولید محتوا

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