وبسایت و پروفایل شخصی داود جمیری

تئوری رنگ 101: راهنمای کامل چرخ های رنگی و طرح های رنگی

وقتی مشغول غربال کردن خبرخوان خود هستید ، چه چیزی باعث جلب توجه شما می شود؟ به احتمال زیاد ، این فیلم ها ، تصاویر ، تصاویر متحرک GIF و سایر محتوای بصری YouTube است ، درست است؟

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

من می دانم که ممکن است به چه فکری بپردازید: “من نمی دانم چگونه تصاویر زیبایی را طراحی کنم. من خلاق نیستم”.

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

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

Download Now: 150+ Content Creation Templates [Free Kit]

و می توانید این کار را با یادگیری تئوری رنگ انجام دهید. این دوره مقدماتی خود را در نظر بگیرید ، و ما عناوین زیر را پوشش خواهیم داد:

تئوری رنگ چیست؟

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

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

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

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

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

راهنمای طراح ما برای تئوری رنگ ، چرخ های رنگ و طرح های رنگی برای سایت خود را بخوانید.

تئوری رنگ 101

بیایید ابتدا به کلاس هنر دبیرستان برگردیم و در مورد اصول رنگ صحبت کنیم.

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

Circular color theory model with labels for primary colors, secondary colors, and tertiary colors

رنگ های اصلی

رنگهای اصلی آنهایی هستند که نمی توانید با ترکیب دو یا چند رنگ دیگر با هم ایجاد کنید. آنها شباهت زیادی به اعداد اول دارند که با ضرب دو عدد دیگر با هم ایجاد نمی شوند.

سه رنگ اصلی وجود دارد:

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

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

دانستن اینکه رنگهای اصلی نارنجی را ایجاد می کنند بلیط شما برای شناسایی رنگهایی است که ممکن است با نارنجی مطابقت داشته باشد – با توجه به سایه ، رنگ یا رنگ مناسب. این ما را به نوع بعدی رنگ ما می رساند …

رنگ های ثانویه

رنگ های ثانویه رنگ هایی هستند که با ترکیب هر دو از سه رنگ اصلی ذکر شده در بالا تشکیل می شوند. مدل تئوری رنگ بالا را بررسی کنید – ببینید چگونه هر رنگ ثانویه توسط دو از سه رنگ اصلی پشتیبانی می شود؟

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

  • قرمز + زرد = نارنجی
  • آبی + قرمز = بنفش
  • زرد + آبی = سبز

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

رنگ های سوم

رنگ های سوم وقتی ایجاد می شوند که رنگ اصلی را با رنگ ثانویه مخلوط کنید.

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

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

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

  • قرمز + بنفش = قرمز بنفش (سرخابی)
  • قرمز + نارنجی = قرمز نارنجی (ورمیلیون)
  • آبی + بنفش = آبی-بنفش (بنفش)
  • آبی + سبز = آبی-سبز (گل مینا)
  • زرد + نارنجی = زرد-نارنجی (کهربا)
  • زرد + سبز = زرد-سبز (فهرست استفاده)

چرخ تئوری رنگ

بسیار خوب ، عالی است. بنابراین اکنون شما می دانید که “اصلی” چه رنگ هایی هستند ، اما من و شما هر دو می دانیم که انتخاب ترکیب رنگ ها ، خصوصاً در رایانه ، دامنه بسیار گسترده تری از 12 رنگ اساسی را شامل می شود.

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

Color theory wheel with labels for each color's hue, tint, tone, and shade

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

رنگ

Hue تقریباً همان معنی است که در واقع وقتی کلمه “رنگ” را می گوییم منظور ماست. به عنوان مثال ، تمام رنگ های اصلی و ثانویه “رنگ” هستند.

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

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

سایه

ممکن است اصطلاح “سایه” را تشخیص دهید زیرا این واژه اغلب برای اشاره به نسخه های روشن و تاریک از یک رنگ استفاده می شود. اما در حقیقت ، سایه از نظر فنی رنگی است که هنگام افزودن رنگ سیاه به هر رنگ مشخصی به آن می رسید. “سایه” های مختلف فقط به میزان سیاه افزودن شما اشاره دارند.

رنگ

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

آهنگ (یا اشباع)

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

با رعایت اصول اولیه ، بیایید به چیزی کمی پیچیده تر بپردازیم – مانند تئوری رنگ افزودنی و تفریحی.

تئوری رنگ افزودنی و تفریحی

اگر تا به حال در برنامه های رایانه ای با رنگ بازی کرده اید ، احتمالاً ماژولی را دیده اید که رنگ های RGB یا CMYK را با تعدادی عدد در کنار حروف ذکر کرده باشد.

تا به حال فکر کرده اید که معنی این حروف چیست؟

CMYK

CMYK مخفف Cyan، Magenta، Yellow، Key (Black) است. اینها همچنین به طور تصادفی رنگهایی هستند که در کارتریج های جوهر چاپگر شما ذکر شده اند. این اتفاقی نیست.

CMYK مدل رنگ تفریحی است. به این دلیل اینگونه نامیده می شود که برای رسیدن به رنگ سفید باید رنگ کم کنید . این بدان معنی است که عکس این درست است – هرچه بیشتر رنگ اضافه کنید ، به رنگ سیاه نزدیکتر می شوید. گیج کننده است ، درست است؟

Subtractive color diagram with CMYK in the center

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

سپس ، بیایید بگوییم شما باید آن قطعه کاغذ چاپ شده را دوباره در چاپگر قرار دهید و دوباره چیزی را روی آن چاپ کنید. متوجه خواهید شد که مناطقی که روی آنها دو بار چاپ شده اند نزدیک به سیاه رنگ هستند.

فکر کردن درباره CMYK از نظر تعداد متناظر با آن آسان تر است. CMYK در مقیاس 0 تا 100 کار می کند. اگر C = 100 ، M = 100 ، Y = 100 و K = 100 باشد ، در نهایت با رنگ سیاه مواجه خواهید شد. اما ، اگر هر چهار رنگ برابر با 0 باشد ، در نهایت با سفید واقعی مواجه خواهید شد.

RGB

از طرف دیگر

مدل های رنگی RGB برای نمایشگرهای الکترونیکی از جمله رایانه ها طراحی شده اند.

RGB مخفف قرمز ، سبز ، آبی است و براساس مدل رنگ افزودنی امواج نور است. این بدان معناست که هرچه رنگ شما بیشتر شود ، بیشتر به رنگ سفید نزدیک می شوید. برای رایانه ها ، RGB با استفاده از مقیاس های 0 تا 255 ایجاد می شود. بنابراین ، رنگ سیاه R = 0 ، G = 0 و B = 0 خواهد بود. رنگ سفید R = 255 ، G = 255 و B = 255 خواهد بود.

Additive color model with RGB in the center

هنگام ایجاد رنگ در رایانه ، ماژول رنگی شما معمولاً هر دو شماره RGB و CMYK را لیست می کند. در عمل می توانید از هر یک برای یافتن رنگ استفاده کنید و مدل رنگ دیگر نیز متناسب با آن تنظیم می شود.

با این حال ، بسیاری از برنامه های وب فقط مقادیر RGB یا کد HEX (کدی که برای CSS و HTML به رنگ اختصاص داده شده است) به شما می دهند. بنابراین ، اگر در حال طراحی تصاویر دیجیتالی یا طراحی وب هستید ، RGB بهترین گزینه شما برای انتخاب رنگ است.

همیشه می توانید طرح را به CMYK تبدیل کرده و در صورت نیاز به مواد چاپی ، آن را تنظیم کنید.

معنی رنگ

همراه با تأثیر متفاوت بصری ، رنگهای مختلف نمادین احساسی متفاوتی را نیز به همراه دارند.

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

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

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

بیایید هر کدام را با جزئیات بیشتری بررسی کنیم.

1 تک رنگ

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

Color wheel with two monochromatic colors plotted along the red hue

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

تمام رنگهای تک رنگ را که در زیر رنگ قرمز قرار دارند ، بررسی کنید. این رنگ اصلی است.

Red color scheme example with red hue, tint, tone, and shade

2. آنالوگ

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

Color wheel with five analogous colors plotted between blue and yellow

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

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

Analogous color scheme pallette

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

3 مکمل

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

color wheel showing complementary colors on opposite sides of the wheel

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

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

complementary color sceme example with oranges and blues

4 تقسیم مکمل

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

color wheel with split complementary color scheme values plotted

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

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

split complementary color scheme example with pale blue, peach, blue, and red

5. سه گانه

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

Color wheel with three triadic colors plotted between purple, green, and orange

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

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

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

Color scheme example with purple, green, and orange triadic colors

6. مربع

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

Square color scheme

منبع تصویر

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

Capital Square Color Palette منبع تصویر

7. مستطیل

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

Rectangle color Schme

منبع تصویر

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

tetradic Color Palette

منبع تصویر

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

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

1 Prioritize the user experience, first.

Before you add color to your website, app, product, or packaging, get the basic design downpat in greyscale.

This lets you focus on what matters most: User experience. Instead of focusing on the color scheme of your overall site or the hue of specific buttons or links, make sure everything works like it’s supposed to. Make sure links aren’t broken, product pages are up-to-date and email opt-ins are ready to go.

Here’s why: Even the best-looking website or product with perfect color selection won’t be enough to keep visitors if they can’t find what they’re looking for.

2. Leverage natural inspiration.

Once your site operations are solid, it’s time to start selecting colors.

Not sure what looks good? Take a look outside. Nature is the best example of colors that complement each other — from the green stems and bright blooms of flowering plants to azure skies and white clouds, you can’t go wrong pulling context from natural colors and combinations.

3 Set a mood for your color scheme.

With a few color choices in mind, consider the mood you want your color scheme to set. If passion and energy are your priorities, lean more toward red or brighter yellows. If you’re looking to create a feeling of peace or tranquility, trend toward lighter blues and greens.

It’s also worth thinking negatively. This is because negative space — in either black or white — can help keep your design from feeling too cluttered with color.

4 Consider color context.

It’s also worth considering how colors are perceived in contrast.

In the image below, the middle of each of the circles is the same size, shape, and color. The only thing that changes is the background color.

Yet, the middle circles appear softer or brighter depending on the contrasting color behind it. You may even notice movement or depth changes just based on one color change.

Color Context with backgrounds

This is because the way in which we use two colors together changes how we perceive it. So, when you’re choosing colors for your graphic designs, think about how much contrast you want throughout the design.

For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? احتمالا نه. You’d most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background.

5. Refer to your color wheel.

Next, consider your color wheel and the schemes mentioned above. Select a few different color combinations using schemes such as monochrome, complementary, and triad to see what stands out.

Here, the goal isn’t to find exactly the right colors on the first try and create the perfect design, but rather to get a sense of which scheme naturally resonates with your personal perception and the look of your site.

You may also find that schemes you select that look good in theory don’t work with your site design. This is part of the process — trial and error will help you find the color palette that both highlights your content and improves the user experience.

6. Use the 60-30-10 rule.

Often used in home design, the 60-30-10 rule is also useful for website or app design. The idea here is to use three colors: A main color for 60% of your design, a secondary color for 30% of your design and an accent color for the last 10%.

While these aren’t hard-and-fast numbers, they help give a sense of proportion and balance to your site by providing a primary color with secondary and accent colors that all work together.

7. Draft multiple designs.

Draft and apply multiple color designs to your website and see which one(s) stand out. Then, take a step back, wait a few days and check again to see if your favorites have changed.

Here’s why: While many designers go in with a vision of what they want to see and what looks good, the finished product often differs on digital screens that physical color wheels — what seemed like a perfect complement or an ideal color pop may end up looking drab or dated.

Don’t be afraid to draft, review, draft again and throw out what doesn’t work — color, like website creation, is a constantly-evolving art form.

به زبان ساده؟ تمرین کامل می کند. The more you play with color and practice design, the better you get. No one creates their masterpiece the first time around.

Color Tools

There’s been a lot of theory and practical information for actually understanding which colors go best together and why. But when it comes down to the actual task of choosing colors while you’re designing, it’s always a great idea to have tools to help you actually do the work quickly and easily.

Luckily, there are a number of tools to help you find and choose colors for your designs.

Adobe Color

One of my favorite color tools to use while I’m designing anything — whether it’s an infographic or just a pie chart — is Adobe Color (previously Adobe Kuler).

This free online tool allows you to quickly build color schemes based on the color structures that were explained earlier in this post. Once you’ve chosen the colors in the scheme you’d like, you can copy and paste the HEX or RGB codes into whatever program you’re using.

It also features hundreds of premade color schemes for you to explore and use in your own designs. If you’re an Adobe user, you can easily save your themes to your account.

Color wheel on dashboard of Adobe Color

Illustrator Color Guide

I spend a lot of time in Adobe Illustrator, and one of my most-used features is the color guide. The color guide allows you to choose one color, and it will automatically generate a five-color scheme for you. It will also give you a range of tints and shades for each color in the scheme.

If you switch your main color, the color guide will switch the corresponding colors in that scheme. So if you’ve chosen a complementary color scheme with the main color of blue, once you switch your main color to red, the complementary color will also switch from orange to green.

Like Adobe Color, the color guide has a number of preset modes to choose the kind of color scheme you want. This helps you pick the right color scheme style within the program you’re already using.

After you’ve created the color scheme that you want, you can save that scheme in the “Color Themes” module for you to use throughout your project or in the future.

Color options on Illustrator Color Guide tool

Preset Color Guides

If you’re not an Adobe user, you’ve probably used Microsoft Office products at least once. All of the Office products have preset colors that you can use and play around with to create color schemes. PowerPoint also has a number of color scheme presets that you can use to draw inspiration for your designs.

Where the color schemes are located in PowerPoint will depend on which version you use, but once you find the color “themes” of your document, you can open up the preferences and locate the RGB and HEX codes for the colors used.

You can then copy and paste those codes to be used in whatever program you’re using to do your design work.

Color swatches and meters in PowerPoint

Finding the Right Color Scheme

There’s a lot of theory in this post, I know. But when it comes to choosing colors, understanding the theory behind color can do wonders for how you actually use color. This can make creating branded visuals easy, especially when using design templates where you can customize colors.

content templates

نوشته ها مرتبط

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *