علیرضا فاضلی
طراح وب و گرافیست

شناخت 30 رنگ مهم در طراحی وب سایت که باید بدانید

مهمترین رنگ ها در طراحی وب سایت کدام هستند؟ بهترین رنگ ها در طراحی وب سایت چه رنگهایی هستند؟ هنگام ساخت یک وب سایت، به عناصر بصری سایت، به خصوص طرح رنگ توجه کنید. انتخاب رنگ‌های مناسب بسیار مهم است زیرا ۲۱ درصد از بازدیدکنندگان وب سایتی را با رنگ ‌های عجیب ترک می‌کنند.از آنجایی که طرح های رنگی وب سایت بسیار زیاد است، انتخاب مناسب می تواند چالش برانگیز باشد.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

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

انتخاب رنگ بندی مناسب وب سایت می تواند بر تصمیمات بازدیدکنندگان شما تأثیر بگذارد. اگر عناصر مهمی مانند دعوت به اقدام (CTA) برجسته شوند، بازدیدکنندگان بیشتر با آنها تمایل خواهند داشت.CTA بخشی از یک وب سایت است که بازدیدکنندگان را وادار می کند تا اقدامی را انجام دهند که منجر به تبدیل می شود. این می تواند متن، تصویر یا دکمه باشد. یک مطالعه نشان می دهد که رنگ قرمز برای دکمه CTA بهتر از سبز عمل می کند. قرمز بیشتر از رنگ سبز با طرح رنگ وب سایت متضاد است و به بازدیدکنندگان اجازه می دهد تا CTA را راحت تر تشخیص دهند.علاوه بر این، قرمز بر اساس روانشناسی رنگ، احساسات پرانرژی، سریع و پرشور را بر می انگیزد.

آموزش فتوشاپ

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

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

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

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

1. سفید و سیاه

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: سفید (#FFFFFF)، مشکی (#1D1D1)


2. سبز تیره، عاج و زرد

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: سبز (#009B4D)، زرد نارنگی (#FFCC00)، عاج (#FAF5E9)


3. سبز روشن و صورتی تند

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: سبز مالاکیتی (#31EC56)، رازماتاز ​​(#EF036C)، هلیوتروپ (#EE72F8)


4. خاکستری تیره و زرد-سبز

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

آموزش ایلوستریتور

در پس زمینه خاکستری وب سایت، زرد-سبز می تواند به راحتی چشم را جلب کند. استفاده از زرد-سبز به بازدیدکنندگان این امکان را می دهد که CTA ها را بهتر ببینند و در نتیجه تبدیل بهتری دارند. علاوه بر این، این رنگ احساسات پر انرژی را برمی انگیزد و آن را برای یک وب سایت مرتبط با ورزش مناسب می کند. نکته تخصصیساده ترین راه برای انتخاب رنگ CTA این است که به طرف مقابل پالت رنگ غالب نگاه کنید و یکی را از آنجا انتخاب کنید. علاوه بر این، کنتراست بین پس زمینه و دکمه CTA نقش مهمی ایفا می کند. بنابراین، هر طراح باید دستورالعمل‌های WCAG 2.0 و APCA را رعایت کند، زیرا هر پالت ممکن است بسته به استفاده از آن، نتایج متفاوتی بدهد.

انتخاب رنگ در طراحی

رنگ های استفاده شده: زرد-سبز (#BAFF39)، خاکستری کم رنگ (#6E6E6E)، سفید (#FFFFFF)


5. سایه های آبی و سفید

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: آبی روشن (#E9F1FA)، آبی روشن (#00ABE4)، سفید (#FFFFFF)


6. سفید و سبز لیمویی

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

انتخاب رنگ در طراحی

رنگ استفاده شده: لیمویی (#00DD00)، سفید (#FFFFFF)

بیشتر بدانید : نکات و اصول مهم در طراحی کارت ویزیت و سربرگ

7. بژ و خاکستری تیره

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: بژ (#DDD0C8)، خاکستری تیره (#323232)


8. مشکی و آبی نئون

آبی برای یک وب‌سایت آینده ‌نگر و با مضمون فناوری بالا، با توجه به ارتباط آن با فناوری مدرن، مناسب است. پالت رنگ وب سایت Neuro Symbolic Lab از رنگ آبی نئون و یک پس زمینه عمدتا مشکی تشکیل شده است. این ترکیب رنگ آبی را متمایز می کند و بر تم اینده وب سایت تأکید می کند. ترکیب رنگ ساده نیز طراحی وب شلوغ را ساده می کند. استفاده از رنگ های بیشتر وب سایت را پیچیده می کند و حواس بازدیدکنندگان را پرت می کند. این وب سایت همچنین از متن سفید برای تکمیل محیط تاریک و بهبود خوانایی و تجربه کاربری استفاده می کند.

انتخاب رنگ در طراحی

رنگ های مورد استفاده: آبی نئون (#2272FF)، مشکی (#1D1D1)


9. سایه های نارنجی و آبی

برای یک طرح رنگی منحصر به فرد وب سایت، پالت رنگی نارنجی و آبی A Short Journey را در نظر بگیرید. این وب سایت از سایه های مختلف نارنجی برای پس زمینه استفاده می کند. این رنگ اصلی به وب سایت عمق بیشتری می دهد و با طراحی وب سه بعدی مطابقت دارد. سایه نارنجی معمولاً با شادی و اشتیاق همراه است. این برای این وب سایت عالی است، که بازدیدکنندگان را تشویق می کند به تعطیلات بروند. اشیاء پیش زمینه عمدتا از آبی و سفید استفاده می کنند. این رنگ متضاد به بازدیدکنندگان اجازه می دهد تا روی عناصر قابل تعامل وب سایت تمرکز کنند.

انتخاب رنگ در طراحی

رنگ های استفاده شده: نارنجی (#F9B872، #FAE7A5)، آبی پودری (#B6E1E7)

10. صورتی کم رنگ و آبی دریایی

برخی از وب سایت ها محصولات، خدمات یا محتوا را برای یک جنسیت خاص ارائه می کنند. این وب سایت ها ممکن است از یک طرح رنگی خاص به عنوان یک اشاره استفاده کنند. طرح ‌های رنگی برای وب ‌سایت ‌های مخصوص زنان معمولاً حاوی رنگ صورتی است. نمونه ای از وب سایت صورتی Oui اثر Jean Dousset است. این وب سایت تجارت الکترونیک جواهرات الماس طراحی شده برای زنان را می فروشد، از این رو پالت رنگ صورتی غالب است. این وب سایت از سایه های مختلف صورتی برای جداسازی بخش ها استفاده می کند. برای افزودن پویایی بیشتر، از آبی سرمه ای به عنوان رنگ مکمل استفاده می کند.

انتخاب رنگ در طراحی

رنگ های مورد استفاده: صورتی (#E1B0AC)، صورتی روشن (#F2D4D6)، آبی سرمه ای (#213F99)

بیشتر بدانید : ایندیزاین چیست؟

11. بنفش پاستلی و خنثی

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

انتخاب رنگ در طراحیانتخاب رنگ در طراحی

رنگ های استفاده شده: بنفش پاستلی (#C5ADC5)، آبی استیل روشن (#B2B5E0)


12. آبی دریایی و آبی برقی

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

انتخاب رنگ در طراحی

رنگ های استفاده شده: آبی تیره (#01257D)، آبی برقی (#00FFFF)


13. گرادیان رنگ، سفید و آبی تیره

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: یاسی سفید (#F8F8F9)، آبی تیره (#111439)، گرادیان رنگ


14. بژ، نارنجی و سفید

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: بژ (#CD9C8A)، نارنجی (#FF5100)، سفید (#FFFFFF)


15. سفید و آبی خاکستری

آبی احساس آرامش را بر می انگیزد، که برای وب سایت Blue Lagoon عالی است. این وب سایت تجربه هتل آرامش بخش این شرکت را نشان می دهد. طرح رنگی وب سایت استراحتگاه چشمه آب گرم از سایه های ظریف آبی مایل به خاکستری و سفید استفاده می کند که یادآور آب و بخار چشمه آب گرم است. آبی مایل به خاکستری برای پالت رنگی آرام در مقایسه با سایر رنگ های آبی بهتر عمل می کند، زیرا پر جنب و جوش کمتری دارد. جفت کردن پس‌زمینه سفید با خاکستری آبی منجر به یک سایت مینیمال با ظاهری کم‌رنگ می‌شود. در مورد متن و دکمه‌ها، Blue Lagoon از خاکستری و قهوه‌ای تیره استفاده می‌کند. علیرغم استفاده از رنگ های خاموش، CTA ها به لطف فضای سفید همچنان برجسته هستند.

انتخاب رنگ در طراحی

رنگ های استفاده شده: آبی-خاکستری (#96C2DB، #E5EDF1)، سفید (#FFFFFF)

بیشتر بدانید : آموزش ساخت رنگ طلایی در فتوشاپ

16. قرمز و سفید روشن

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

انتخاب رنگ در طراحی

رنگ های استفاده شده: سفید دودی (#F0F0F0)، قرمز روشن (#E7473C)


17. آبی کلاسیک، فیروزه ای و طلایی

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: آبی کلاسیک تیره (#0A1828)، فیروزه ای (#178582)، طلایی (#BFA181)


18. زرد و آبی

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

انتخاب رنگ در طراحی

رنگ های استفاده شده: زرد (#FFCE32)، آبی پروس (#1D63FF)

بیشتر بدانید : کورل چیست؟

19. آبی سلطنتی تیره و طلایی

طرح رنگ وب سایت Sotheby’s یک گزینه عالی برای وب سایتی است که هدف آن حرفه ای و آماده به نظر می رسد. این وب سایت عمدتا از سایه آبی سلطنتی تیره با رنگ های سفید و طلایی استفاده می کند. آبی سلطنتی به دلیل سابقه اش با سلطنت بریتانیا، رنگی شیک است. در همین حال، طلا نماد پرستیژ، ثروت و موفقیت است ، مناسب برای وب سایت این شرکت املاک لوکس. هنگامی که با هم جفت می شوند، ترکیب آبی سلطنتی تیره و طلایی یک وب سایت باکلاس و مرتب ایجاد می کند. این طرح رنگی وب سایت همچنین به شرکت کمک می کند تا شهرت خود را در بین بازدیدکنندگان ایجاد کند.

انتخاب رنگ در طراحی

رنگ های استفاده شده: آبی (#002349)، طلایی (#957C3D)


20. آبی، بژ و قرمز مرجانی

ترکیب سه رنگ می تواند مشکل باشد زیرا برخی از رنگ ها احتمالاً با هم برخورد می کنند. اما وقتی به خوبی انجام شود، نتیجه می تواند به طرز شگفت انگیزی خوشایند باشد. Dollar Shave Club وب سایتی است که ترکیب سه رنگ را به خوبی انجام می دهد. طرح های رنگی وب سایت شرکت نظافت شخصی در اطراف قرمز مرجانی و بژ متمرکز است. اگرچه قرمز مرجانی و بژ معمولاً با رنگ های خنثی جفت می شوند، اما Dollar Shave Club به جای آن رنگ آبی را انتخاب می کند. شرکت آرایش شخصی از آبی تیره به عنوان رنگ اصلی وب سایت برای تضاد رنگ بژ و قرمز مرجانی استفاده می کند و به عناصر مهم اجازه می دهد بیشتر قابل توجه باشند. آبی برای این وب سایت که عمدتاً محصولات آرایش مردانه را می فروشد نیز ایده آل است. مردان ممکن است آبی را ترجیح دهند زیرا رنگ معمولاً با مردانگی مرتبط است.

شناخت 30 رنگ مهم در طراحی وب سایت که باید بدانید

رنگ های مورد استفاده: آبی تیره (#001233)، قرمز مرجانی روشن (#FF595A)، بژ (#CAC0B3)

بیشتر بدانید : ایلوستریتور چیست؟ 

21. قرمز و زرد

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: قرمز مرجانی (#FE3A4A)، خشخاش طلایی (#FEC501)


22. سفید و بنفش

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: بنفش تیری (#4F0341)، سفید (#FFFFFF)


23. بژ و قرمز

با توجه به روند رنگ، برخی از سایه ها به شدت با یک دوره خاص مرتبط هستند. اگر دنبال تم دهه 90 هستید، پالت رنگی وب سایت Pertinens را برای الهام گرفتن در نظر بگیرید. این وب سایت از رنگ بژ به عنوان رنگ اصلی و قرمز به عنوان لهجه استفاده می کند. استفاده از رنگ قرمز در وب‌سایت‌هایی که عمدتاً خالی هستند، به رنگ روشن اجازه می‌دهد تا توجه بازدیدکنندگان را به راحتی جلب کند.رنگ بژ احساس یکپارچه سازی با سیستم عامل قوی را تداعی می کند زیرا بسیاری از وسایل الکترونیکی قدیمی به آن رنگ هستند. علاوه بر این، قرمز تند روشن در دهه 90 یک رنگ محبوب بود. برای جالب تر کردن وب سایت، Pertinens یک تصویر دفتر دهه 1990 را اضافه کرد. این یک روش هوشمندانه برای تزئین یک وب سایت در حالی که تم و طرح رنگ ثابت است.

انتخاب رنگ در طراحی

رنگ های استفاده شده: بژ روشن (#FDF8F0)، زرشکی (#F0122D)


24. سایه های آبی، سفید و قرمز بنفش

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: آبی کم رنگ (#EFFAFD)، آبی سلطنتی (#4A8BDF)، بادمجانی (#A0006D)


25. آبی و سفید

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: سبز کاردین (#0C1A1A)، سرمه ای (#6ACFC7)


26. نارنجی روشن و مایل به قرمز

به عنوان CIRCUS Inc. نشان می دهد، گاهی اوقات ممکن است فقط به یک رنگ برای وب سایت خود نیاز داشته باشید. این شرکت بازاریابی برای وب سایت چینی خود از رنگ های قرمز و نارنجی روشن استفاده می کند. تفاوت رنگ باعث می شود سایه های نارنجی با وجود یک رنگ بودن، متمایز به نظر برسند. این ترکیب همچنین شبیه پرچم چین است و تم وب سایت را ثابت نگه می دارد. استفاده از دو رنگ روشن در کنار هم باعث می شود وب سایت سرزنده و جسورانه به نظر برسد. در مورد رنگ های برجسته، شرکت به سادگی سیاه و سفید را برای تضاد پس زمینه روشن انتخاب می کند. این رنگ‌های خنثی حواس‌تان را پرت نمی‌کنند و به حفظ لحن گرم وب‌سایت کمک می‌کنند.

انتخاب رنگ در طراحی

رنگ های استفاده شده: نارنجی (#FFAB00)، نارنجی هارلی دیویدسون (#DD2E18)

بیشتر بدانید : ادوبی ایکس دی چیست؟

27. سفید، بنفش و نارنجی

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

انتخاب رنگ در طراحی

رنگ های استفاده شده: سفید (#FFFFFF)، نارنجی غروب آفتاب (#FF5841)، قرمز-بنفش (#C53678)


28. زرد، قهوه ای و بنفش

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

انتخاب رنگ در طراحی

رنگ های استفاده شده: زرد آفتابی (#FFD43A)، شکلات نانوایی (#582C12)، ارغوانی متوسط ​​(#D668E3)


29. بنفش عمیق، نارنجی، قرمز و صورتی

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

انتخاب رنگ در طراحی

رنگ های مورد استفاده: قرمز تیره (#8E0D3C)، انگور فرنگی سیاه #1D1842)، نارنجی (#EF3B33)، صورتی رز (#FDA1A2)


30. قهوه ای و بژ

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

انتخاب رنگ در طراحی

رنگ های استفاده شده: نارویک (#EAE7DD)، قهوه ای سورل (#99775C)


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

  • چرا طرح های رنگی وب سایت مهم هستند؟

    زیرا ۲۱ درصد از بازدیدکنندگان وب سایتی را با رنگ ‌های عجیب ترک می‌کنند.از آنجایی که طرح های رنگی وب سایت بسیار زیاد است، انتخاب مناسب می تواند چالش برانگیز باشد.
  • انتخاب پالت مناسب چه مزایایی دارد؟

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

علیرضا فاضلی
علیرضا فاضلی

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

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

نظرات