طراحی گرافیک

تئوری رنگ

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

درس ۳ از ۱۲
مقدماتی
رایگان، بدون ثبت نام

یک دور کامل چرخه، از رنگ پایه تا مکمل و برگشت

هر ایست، یک نسبت است. هر چه از پایه دورتر می شوید تنش بیشتر می شود.

۱ رنگ پایه
۲ همسایه
۳ سه گانه
۴ مکمل
۵ سه گانه، طرف دیگر
۶ همسایه، طرف دیگر

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

آخرین بررسی: ۱۵ شهریور ۱۴۰۵ فکت ها و نام ابزارهای این درس در همین تاریخ با منابعشان بازبینی شده اند.

رنگ یک اسم نیست، سه عدد است

وقتی می گویید «آبی»، هزار آبی ممکن است. برای اینکه بشود درباره رنگ حرف زد و تصمیم گرفت، باید از اسم بیرون آمد و به عدد رسید. رایج ترین دستگاهی که طراح ها با آن فکر می کنند سه عدد دارد و اسمش HSL است.

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

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

یک نکته که همین ابتدا باید گفته شود، چون بعدا به کار می آید و کمتر جایی نوشته می شود: روشنایی در HSL با روشنایی ای که چشم شما می بیند یکی نیست. زرد hsl(60 100% 50%) و آبی hsl(240 100% 50%) هر دو روشنایی پنجاه درصد دارند، ولی آن زرد روی سیاه نسبت کنتراست ۱۹.۵۶ به ۱ می دهد و آن آبی فقط ۲.۴۴ به ۱. یک عدد یکسان، دو رنگ که چشم اصلا هم اندازه نمی بیندشان. فضاهای رنگی تازه تر مثل oklch() که در نسخه چهارم مشخصات رنگ CSS آمده دقیقا برای رفع همین ایراد ساخته شده اند.

سه عددی که یک رنگ را می سازند

هر کدام را می شود جدا از آن دو تای دیگر تکان داد؛ همین است که HSL را از هگز مفیدتر می کند.

فام، جای رنگ روی چرخهاشباع، چقدر خالص

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

روشنایی HSL با روشنایی ای که چشم می بیند یکی نیست، و مثالش در متن همین بخش آمده. برای کاری که به روشنایی ادراکی نیاز دارد باید سراغ فضاهای تازه تر رفت.

چرخه رنگ چه چیزی را می گوید و چه چیزی را نمی گوید؟

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

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

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

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

پالت را از چند رنگ ببندیم؟

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

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

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

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

پنج نقشی که یک پالت کارآمد پر می کند

رنگ غالب

بیشترین سهم صفحه. اگر برند رنگ دارد، معمولا همین است.
رنگ پشتیبان

برای بخش هایی که باید از بقیه جدا شوند ولی نباید فریاد بزنند.
رنگ تاکید

کمترین مساحت، مهم ترین کار. اگر همه جا باشد دیگر تاکید نیست.
خنثی های روشن

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

پالت

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

چرا کنتراست کار روشنایی است و نه رنگ

این بخش تنها جایی از تئوری رنگ است که یک عدد سخت گیرانه پشتش هست، و همان جایی است که بیشترین اشتباه در آن رخ می دهد. قرمز خالص روی سبز خالص را در نظر بگیرید: دو رنگ کاملا متفاوت، دورترین حالت ممکن روی چرخه از نظر خیلی ها، و نسبت کنتراستشان فقط ۲.۹۱ به ۱ است. یعنی متن قرمز روی زمینه سبز عملا خوانده نمی شود، هر چقدر هم که «متضاد» به نظر برسند.

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

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

عددهای الزامی را استاندارد WCAG می دهد: برای متن معمولی دست کم ۴.۵ به ۱ و برای متن درشت و اجزای رابط ۳ به ۱. اینها را در درس دسترس پذیری وب با عددهای واقعی پالت همین سایت و روش اندازه گیری باز کرده ایم و اینجا تکرارشان نمی کنیم. تنها چیزی که این درس اضافه می کند این است: کنتراست خاصیت یک رنگ نیست، خاصیت یک جفت است. رنگی که به عنوان متن عالی است، وقتی خودش پس زمینه شود ممکن است رد شود، و آن وقت نیاز به دو نسخه از یک فام دارید، نه یکی.

کدام محور کنتراست می سازد و کدام فقط حال و هوا

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

روشنایی: چیزی که خوانایی می سازد

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

فام و اشباع: چیزی که حال و هوا می سازد

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

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

یک کد هگز، دو صفحه نمایش، دو رنگ

یک چیز که در آموزش های تئوری رنگ تقریبا هیچ وقت گفته نمی شود: کد رنگ یک دستور است، نه یک تضمین. همان هگز روی مانیتور طراح، روی گوشی ارزان مشتری و روی پروژکتور جلسه سه رنگ کمی متفاوت می شود، و این ایراد هیچ کس نیست.

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

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

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

مسیر سریع با هوش مصنوعی

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

رنگی که از قبل دارید را بردارید، حتی اگر فقط یک هگز از لوگو باشد. شروع کردن از رنگ برند، پالت را از روز اول به چیزی که مشتری دارد وصل می کند.
دستور زیر را با همان هگز اجرا کنید. برای این کار یک مدل سریع و ارزان از رده Gemini Flash کافی است، چون کار عمدتا حساب است؛ انتخاب فعلی ما میان مدل ها در <a class="text-link" href="/ai/">بخش هوش مصنوعی</a> به روز نگه داشته می شود.
جدول جفت ها را از بالا بخوانید و هر ردیفی که زیر حد است را همان جا با بالا یا پایین بردن روشنایی درست کنید. فام را دست نزنید؛ اگر فام را عوض کنید دیگر رنگ برند نیست.
خروجی را روی یک صفحه واقعی بگذارید و سیاه و سفیدش کنید. عدد درست بودن یک شرط لازم است و نه کافی؛ چیزی که تصمیم می گیرد همان تست خاکستری است.

نسخه آماده کپی

رنگ پایه من این است: {هگز رنگ برند}
پس زمینه سایت: {روشن یا تیره}

۱. از این رنگ نه پله روشنایی بساز، از خیلی روشن تا خیلی تیره، طوری که فام و اشباع تقریبا ثابت بماند. هر پله را با کد هگز و با معادل hsl() بنویس.
۲. سه خاکستری هم پیشنهاد بده که با این فام هماهنگ باشند: یکی برای پس زمینه سطح، یکی برای مرز، یکی برای متن دوم.
۳. یک جدول بساز از همه جفت هایی که در عمل متن روی پس زمینه می شوند. برای هر جفت نسبت کنتراست را با فرمول روشنایی نسبی WCAG حساب کن و عدد را با دو رقم اعشار بنویس.
۴. کنار هر ردیف بنویس قبول یا رد، با معیار ۴.۵ به ۱ برای متن معمولی و ۳ به ۱ برای متن درشت و اجزای رابط. ردیف های رد شده را اول بیاور.
۵. برای هر ردیف رد شده فقط یک اصلاح پیشنهاد بده و آن اصلاح باید تغییر روشنایی باشد، نه تغییر فام.

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

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

هوش مصنوعی در این کار

موضع ما درباره رنگ و هوش مصنوعی این است: برای حساب کردن عالی است، برای انتخاب کردن نه. مدل ها نسبت کنتراست را سریع تر از شما حساب می کنند، پله های روشنایی می سازند و از یک عکس، رنگ های موجود را بیرون می کشند. ولی «کدام رنگ به این برند می خورد» سوالی درباره بازار و مشتری است و نه درباره هندسه؛ آنجا جواب مدل، میانگین چیزی است که در داده اش دیده و همان است که خروجی همه را شبیه هم می کند.

ابزارهایی که واقعا کمک می کنند

Gemini برای همان دستور بالا از همه مناسب تر است، چون هم عکس را می خواند و هم حساب می کند: یک اسکرین شات از صفحه فعلی بدهید و جدول جفت ها را بخواهید. صفحه خود گوگل می نویسد اپ وب جمنای در بیش از دویست و سی کشور و منطقه در دسترس است و ایران در آن فهرست نیست؛ این را از صفحه خودشان خوانده ایم و نه از تست شبکه.
Claude وقتی پالت را می خواهید به کد تبدیل کنید بهتر جواب می دهد: متغیرهای CSS با نام های معنادار، پله های روشنایی به شکل توکن، و حالت روشن و تیره کنار هم. ایران در هیچ کدام از دو فهرست کشورهای پشتیبانی شده انتروپیک نیست و این را روی صفحه خود انتروپیک خوانده ایم.
Adobe Color هوش مصنوعی نیست و همین حسنش است: چرخه رنگ، نسبت های مکمل و همسایه و سه گانه، و یک بخش جدا برای بررسی کنتراست و کوررنگی. برای یاد گرفتن خود نسبت ها از هر مدلی روشن تر است چون نتیجه را همان لحظه می بینید. دسترسی و پرداختش را از ایران خودتان باید امتحان کنید؛ ما ادعایی درباره اش نمی نویسیم.

کجا نتیجه معکوس می دهد

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

منبع ها: W3C: Understanding Contrast (Minimum), WCAG 2.2 Google: where the Gemini web app is available Anthropic: supported countries Adobe Color: accessibility tools

حد این توصیه

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

از تجربه خود ما

رنگ همه شکل های همین سایت از یک جا می آید و آن جا یک گرادیان چهار ایستی است: #ff4d6a، بعد #b06bff در سی و پنج درصد، بعد #4d9fff در شصت و هشت درصد، و #2ee6a8 در انتها. تابع rgb_dg_hue() در موتور نمودار قالب، رنگ گره شماره i از n گره را با نمونه برداری از همین گرادیان در نقطه i تقسیم بر n منهای یک برمی دارد. نتیجه اش این است که رنگ در شکل ها تزئین نیست و ترتیب را نشان می دهد، و کل بخش با یک تعریف رنگ اداره می شود نه با ده ها انتخاب دستی.
و درسی که موقع ساختن نمودارها دادیم و در همین کد پیداست: این روش وقتی شکل یک قضاوت است دروغ می گوید. اگر ردیف ها از خوب به بد مرتب باشند، رنگ موقعیتی به دسته ای که خارج از آن مقیاس است هم رنگ می دهد، انگار آن هم روی همان طیف نشسته. برای همین در نمودارها یک کلید hue روی هر آیتم گذاشتیم که رنگ را برای آن دسته ثابت می کند و اجازه نمی دهد از جایش در فهرست بیاید. رنگ وقتی معنا دارد که به معنا وصل باشد، نه به شماره ردیف.

سوال هایی که واقعا پرسیده می شوند

برای شروع، هگز یاد بگیرم یا HSL؟

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

رنگ برند مشتری کنتراست کافی ندارد. چه کار کنم؟

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

حالت تاریک یعنی همان پالت با رنگ های وارونه؟

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