رنگ های آکسان در وب سایت

رنگ های آکسان در وب سایت

رنگ های آکسان در وب سایت 150 150 webfam

رنگ های آکسان در وب سایت (Accent Color):

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

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

زمانی که رنگ غالب برای وبسایتتون داشته باشید ، به راحتی میتونید رنگ های آکسان وبسایتتون رو با استفاده از ابزار های تطبیق رنگ مثل  Adobe Color CC  پیدا کنید. (https://color.adobe.com)

ابزار تطبیق رنگ Adobe Color CC

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

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

مرحله 1: در مرحله اول کد رنگ غالب وبسایتتون رو از ColorPicker.com دریافت کنید. کد رنگ دقیقا در بالای باکس مربعی رنگ قرار گرفته. وقتی که کد رنگ رو دریافت کردید ، اون رو در قسمت “HEX”  در Adobe Color CC قرار بدید. مطمئن بشید که کد رو در قسمت “HEX” در ستون وسط کپی کردید.

ابزار تطبیق رنگ Adobe Color CC

وقتی که این کار رو انجام می دید، Adobe Color CC  رنگ شما رو همراه با چند رنگ مکمل دیگه نشون می ده.

مرحله 2: در سمت چپ ابزار Adobe Color CC در قسمت  Color Rules، ضوابط رنگی زیر رو میبینید:

  • Analogous
  • Monochromatic
  • Triad
  • Complementary
  • Compound
  • Shades
ابزار تطبیق رنگ Adobe Color CC

بر روی Color Rules کلیلک کنید تا طرح های رنگی مختلف رو ببینید و هرکدوم رو که دوست دارید انتخاب کنید. تمام رنگ های ارائه شده به خوبی با هم کار می کنند.

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

ابزار تطبیق رنگ Adobe Color CC

مرحله 4: کد های طرح رنگی خودتون رو از قسمت پایین ابزار از باکس های HEX  کپی کنید. این کد های رنگی HEX ، کدهای رنگی هستن که میتونید برای وبسایتتون از اون ها استفاده کنید. – همه ی اون ها با رنگ غالب شما به خوبی کار می کنن. سازنده های وب مثل WordPress, Wix, Squarespace, Weebly   و غیره ، به شما این امکان رو می دن که کد های رنگی HEX رو به قسمت های خاصی از وب سایتتون اضافه کنید.

ابزار تطبیق رنگ Adobe Color CC

2. برای ایجاد طرح رنگی خود از یک عکس استفاده کنید.

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

مرحله 1: عکس مورد نظرتون رو آپلود کنید.

مرحله 2: از بین پنج حالت مختلف رنگی در سمت چپ ابزار، یکی رو انتخاب کنید:

  • Colorful
  • Bright
  • Muted
  • Deep
  • Dark

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

ابزار تطبیق رنگ Adobe Color CC

مرحله 3: طرح رنگی خودتون رو با درگ کردن هرکدوم از انتخابگر های رنگ در اطراف عکس ، دقیقا تنظیم کنید.

ابزار تطبیق رنگ Adobe Color CC

مرحله 4: کد های طرح رنگی به دست اومده رو از قسمت پایین ابزار از باکس های HEX  کپی کنید. این کد های رنگی hex ، کدهای رنگی هستن که میتونید برای طراحی کلی وبسایتتون از اون ها استفاده کنید. بر روی نماد چرخ رنگ کلیک کنید تا کد های رنگی طرح رنگیتون رو ببینید. سازنده های وب مثل WordPress, Wix, Squarespace, Weebly   و غیره، به شما این امکان رو می دن که کد های رنگی HEX رو به قسمت های خاصی از وب سایتتون اضافه کنید.

ابزار تطبیق رنگ Adobe Color CC
ابزار تطبیق رنگ Adobe Color CC

نحوه ی استفاده از رنگ های آکسان در وبسایت:

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

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

رنگ های آکسان در وب سایت