تئوری رنگ: فام، اشباع و روشنایی (Color Theory: HSL)
دیگه لازم نیست بین صدتا نمونه‌رنگ بگردی. هر رنگی سه تا پیچه که می‌تونی عمدی بچرخونیشون، و هر پیچ چیز متفاوتی رو تو رفتار رنگ روی صفحه عوض می‌کنه.
ایده‌ی اصلی
سه مؤلفه‌ی اصلی رنگ: فام، اشباع و روشنایی (Hue, Saturation, Lightness)
تو هر نرم‌افزار طراحی پنجره‌ی انتخاب رنگ رو باز کنی، سه تا اسلایدر می‌بینی که معمولاً بهشون می‌گن فام (hue)، اشباع (saturation) و روشنی (lightness). این سه‌تا با هم هر رنگی رو که بشه انتخاب کرد توصیف می‌کنن. عادتی که می‌ارزه بسازی: وقتی یه رنگ جواب نمی‌ده، بپرس کدوم پیچ، و فقط همون رو بچرخون.
آبی آسمونی، سرمه‌ای و آبی خاکستری مات می‌تونن همه یه فام باشن. چیزی که جداشون می‌کنه اینه که هر کدوم چقدر روشنی و چقدر اشباع دارن.
فام یا ته‌رنگ (Hue)
اسم رنگه: قرمز، نارنجی، زرد، سبز، آبی، بنفش. نرم‌افزارها با درجه روی یه دایره اندازه‌ش می‌گیرن، از ۰ تا ۳۶۰، چون رنگ‌ها دور دایره می‌چرخن و برمی‌گردن سر جای اول. عوض کردن فام یعنی عوض کردن اینکه کدوم رنگ رو داری، نه اینکه چقدر قوی یا چقدر کم‌رنگه.
قرمز نزدیک ۰ـه، زرد نزدیک ۶۰، سبز نزدیک ۱۲۰ و آبی نزدیک ۲۱۰. رنگ‌هایی که دو سر دایره‌ن، مثل آبی و نارنجی، بیشتر از همه با هم فرق دارن.
خودت رو امتحان کن
نگار تو پوسترش برای متن از سبز برندش استفاده کرده و پشتش هم یه نسخه‌ی روشن‌تر همون سبز. متن سخت خونده می‌شه. نمی‌خواد خانواده‌ی رنگ رو عوض کنه. کدوم پیچ رو بچرخونه؟
- فام، تا متن کاملاً یه رنگ دیگه بشه
- روشنی، که متن خیلی تیره‌تر از پس‌زمینه بشه
- اشباع، که سبز متن مات‌تر بشه
- هیچ‌کدوم؛ پشت متن یه سایه بذاره
جواب رو ببین
روشنی، که متن خیلی تیره‌تر از پس‌زمینه بشه
آره. خوانایی بیشترش روی پیچ روشنی می‌شینه. فام رو نگه داره و متن رو حسابی تیره‌تر کنه، هم رنگ برند رو داره هم صفحه‌ی خوانا.
اشباع یا غلظت رنگ (Saturation)
یعنی چقدر از خود رنگ واقعاً اونجاست، از ۰ تا ۱۰۰. روی ۱۰۰ اون‌قدر خالص و جیغه که صفحه‌نمایش می‌تونه بسازه. روی ۰ اصلاً رنگی نمونده و خاکستری می‌گیری. کم کردن اشباع همون کاریه که رنگ‌های آروم و جاافتاده رو می‌سازه؛ همون‌هایی که گرون به نظر میان: سبز مریم‌گلی، شنی، صورتی خاکی، سنگی.
زرد ماژیک هایلایت یه فام نزدیک ۶۰ـه با اشباع خیلی بالا. اشباع رو بکش پایین، همون فام می‌شه یه رنگ گندمی ملایم که می‌تونی پشت یه صفحه‌ی پر از متن بذاریش.
روشنی رنگ (Lightness / Value)
یعنی رنگ چقدر به سفید یا به سیاه نزدیکه، از ۰ تا ۱۰۰. روی ۱۰۰ سفید می‌گیری و روی ۰ سیاه، هر چی که اون دو تا پیچ دیگه بگن. همین پیچه که تصمیم می‌گیره متن خونده می‌شه یا نه، چون چشم روشن و تیره رو خیلی تیزتر از فام‌های مختلف از هم جدا می‌کنه.
یه فام بردار و ازش سه نسخه بساز: روشنی ۹۵ برای پس‌زمینه‌ی صفحه، ۵۰ برای دکمه، ۲۰ برای متن. سه تا نقش، یه رنگ، و هیچ‌وقت با هم اشتباه نمی‌شن.
یه رنگ، هر بار یه پیچ
فام اشباع روشنی چی می‌گیری
۲۱۰ ۸۰ ۵۰ یه آبی متوسط قوی
۲۱۰ ۸۰ ۹۲ یه آبی کم‌رنگ، خوب برای پشت متن
۲۱۰ ۱۵ ۵۰ یه آبی خاکستری مات، تقریباً خنثی
۲۱۰ ۸۰ ۲۰ یه سرمه‌ای عمیق، خوب برای متن
۳۰ ۸۰ ۵۰ همون قدرت، اون سر دایرهردیف ۱ تا ۴ یه خانواده‌ی رنگیه که دارن چهار کار متفاوت می‌کنن.
فقط ردیف ۵ رنگ دیگه‌ایه.این سه تا اسلایدر تو هر نرم‌افزار طراحی یه جایی هست، گاهی با برچسب HSB یا HSL. هر بار یکی رو بچرخون و ببین چی عوض می‌شه.
خودت رو امتحان کن
کدوم پیچ چرخونده شده؟
- یه لوگوی قرمز می‌شه نارنجی
- یه صورتی جیغ می‌شه صورتی خاکی ملایم
- متن مشکی می‌شه خاکستری متوسط
- یه زرد گرم می‌شه یه آبی سرد
- همون آبی برای پس‌زمینه خیلی کم‌رنگ‌تر می‌شه
- یه سبز چمنی روشن می‌شه سبز خاکستری
جواب رو ببین
فام: یه لوگوی قرمز می‌شه نارنجی, یه زرد گرم می‌شه یه آبی سرد
اشباع: یه صورتی جیغ می‌شه صورتی خاکی ملایم, یه سبز چمنی روشن می‌شه سبز خاکستری
روشنی: متن مشکی می‌شه خاکستری متوسط, همون آبی برای پس‌زمینه خیلی کم‌رنگ‌تر می‌شه
گرم و سرد
گرم: قرمزها، نارنجی‌ها، زردها
حس فعال، نزدیک و بلند دارن. معمولاً میان جلو، پس یه عنصر گرم هم‌اندازه با یه عنصر سرد، نزدیک‌تر دیده می‌شه. برای اون یه چیزی که حتماً باید دیده بشه خوبن: قیمت حراج، دکمه، هشدار. اگه همه‌جا ازشون استفاده کنی، چشم رو خسته می‌کنن.
سرد: آبی‌ها، سبزها، بنفش‌ها
حس آروم، باثبات و دورتر دارن. عقب می‌شینن، و برای همینه که این‌همه بانک و کلینیک و نرم‌افزار آبی‌ان. برای پس‌زمینه، سطح‌های بزرگ و متن طولانی خوبن. اگه تنها به کار برن، ممکنه سرد و فراموش‌شدنی به نظر بیان.
خودت رو امتحان کن
یه رنگ گرم هم می‌تونه صفحه رو آروم کنه: یه بژ شنی ملایم هم‌زمان فام گرمه و آروم.
جواب رو ببین
درست
درسته، و همین‌جاست که بیشتر تازه‌کارها اشتباه می‌کنن. فام فقط یکی از سه تا پیچه. قرمز و نارنجی بیشتر وقتی بلند داد می‌زنن که اشباعشون بالا باشه؛ اشباع رو بیار پایین، همون فام گرم می‌شه یه پس‌زمینه‌ی ساکت. حال‌وهوا رو با پیچ انتخاب کن، نه فقط با خانواده‌ی رنگ.
خودت رو امتحان کن
هر کار رو به تنظیم پیچ‌هایی که بهش می‌خوره وصل کن
جواب رو ببین
- بنر حراجی که باید داد بزنه → فام گرم، اشباع بالا
- یه ته‌رنگ پشت یه صفحه متن → روشنی خیلی بالا، اشباع پایین
- جلد یه گزارش سالانه‌ی آروم → فام سرد، اشباع متوسط
- متنی که باید روی سفید راحت خونده بشه → روشنی پایین، هر فامی
خودت رو امتحان کن
تو صفحه‌ی رزرو امید، اتاق‌هایی که پر شدن برچسب سبز دارن، چون سبز رنگ برندشه، و اتاق‌های خالی برچسب قرمز. مهمون‌ها مدام اتاق اشتباه رزرو می‌کنن. مشکل اصلی چیه؟
- سبز معمولاً یعنی «آزاد» و قرمز یعنی «پر»، پس برچسب‌ها برعکسن
- سبز و قرمز دو سر مخالف چرخه‌ی رنگن، پس اون‌قدر با هم می‌جنگن که سریع خونده نشن
- رنگ برند اصلاً نباید تو رابط کاربری بیاد، فقط تو تبلیغات
- برچسب‌ها باید اشباع بالاتری داشته باشن که مهمون‌ها ببیننشون
جواب رو ببین
سبز معمولاً یعنی «آزاد» و قرمز یعنی «پر»، پس برچسب‌ها برعکسن
درسته. داره با قراردادی می‌جنگه که مهمون‌هاش از قبل تو ذهنشون دارن، و رنگ برند این‌قدر نمی‌ارزه. معنی‌ها رو جابه‌جا کنه و کلمه‌ی «آزاد» و «پر» رو هم روی برچسب بنویسه تا رنگ تنهایی کار نکنه.
مرور درس
- رنگ سه تا پیچه: فام (کدوم رنگ)، اشباع (چقدر خالص)، روشنی (چقدر نزدیک سفید یا سیاه).
- وقتی یه رنگ جواب نمی‌ده، اسم پیچ رو بگو و فقط همون رو بچرخون.
- روشنی همون پیچیه که خوانایی رو تعیین می‌کنه. اشباع پایین همونیه که رنگ‌ها رو آروم و جاافتاده نشون می‌ده.
- فام گرم میاد جلو و داد می‌زنه؛ فام سرد عقب می‌شینه و آروم می‌کنه.
- معنی رنگ یاد گرفته می‌شه و جا به جا فرق داره، پس همیشه با کلمه هم بگو. طرحت رو خاکستری هم چک کن.