مقالات تجربه کاربری - حالتهای رنگ
حالتهای رنگ
حالتهای رنگ 
حالتهای رنگ (Color Modes) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
یک کد رنگ ششرقمی، رنگ نیست؛ یک دستور است. و مثل هر دستوری، جواب اجرایش به دستگاهی که آن را میخواند بستگی دارد. بخش بزرگی از بحثهای بینتیجهٔ «رنگ برند درست درنمیآید» از همین یک نکته میآید.
منبع، پایهٔ ماجرا را روشن میسازد. این نوشته آن پایه را میآورد و بعد دو چیز اضافه میکند: اینکه مسئلهٔ امروزِ محصول دیجیتال چیز دیگری است، و اینکه یکی از همان حالتهای فهرست منبع در واقع یک آزمون است، نه یک تنظیم.
تعریف
حالتهای رنگ تنظیماتی هستند که طراح با آنها رنگها را بهطور یکدست روی دستگاهها و مواد مختلف نشان میدهد. منبع شش حالت رایج را نام میبرد — LAB، RGB، CMYK، شاخصی، خاکستری و بیتمپ — که در کیفیت و اندازهٔ فایل با هم فرق دارند.
و علت وجود این تنوع، تفاوت فضاهای رنگ و دو فرایند متفاوت تولید رنگ است:
- - افزایشی: آمیختن نور. همهٔ رنگها با شدت کامل، سفید میسازند؛ و نبودِ کامل رنگ، سیاه است. به همین دلیل است که نمایشگر خاموش، سیاه دیده میشود.
- - کاهشی: آمیختن مادهٔ فیزیکی مثل مرکب و رنگ. هر لکه سطح را میپوشاند؛ و آمیختن همهٔ رنگها آن خاکستریقهوهای تیرهٔ آشنا را میدهد.
و اینجاست که پدیدهٔ آشنای «رنگ چاپشده با رنگ صفحه یکی نیست» توضیح داده میشود: چاپگر با فرایند کاهشی، رنگی را که صفحه با فرایند افزایشی ساخته بود بازتولید نکرده. منبع میگوید انتخاب حالت مناسب، این ناهمخوانی را قابلتصحیح میکند. و جملهٔ ماتیس را هم نقل میکند: «کارکرد اصلی رنگ باید خدمت به بیان باشد».
شش حالت و کاربردشان
- - LAB (یا CIELab) بر پایهٔ ادراک انسانی رنگ است: یک کانال روشنایی (L، از ۰ تا ۱۰۰) و دو کانال رنگ (A محور سبز–سرخ و B محور آبی–زرد، از ۱۲۷+ تا ۱۲۸−). مهمترین ویژگیاش مستقلبودن از دستگاه است، پس رسیدن به عین یک رنگ روی رسانههای مختلف — لوگو روی لیوان و بنر — با آن آسانتر است. عیبش اندازهٔ بزرگ فایل و کندشدن بارگذاری است. کاربرد: محصولات برندی، مرجع رنگ، عکاسی.
- - RGB فرایند افزایشی است و فقط در قالبهای دیجیتال وجود دارد. منبع نکتهٔ مهمی میگوید: با اینکه RGB در بیشتر دستگاههای الکترونیکی هست، اجزای رنگی از سیستم به سیستم و مدل به مدل فرق دارند — پس یک تصویر روی دو دستگاه دو جور دیده میشود. کاربرد: طراحی وب و اپ، شبکههای اجتماعی، تبلیغ آنلاین.
- - CMYK (فیروزهای، سرخابی، زرد، سیاه) فرایند کاهشی و زبان چاپ است؛ گسترهٔ رنگیاش از RGB محدودتر است، پس طراحی دیجیتال در CMYK گزینههای رنگی شما را کم میکند.
- - شاخصی شمار رنگها را به یک جدول محدود میکند و فایل را کوچک — و منبع درست میگوید که برای وب، حالت شاخصیِ بهینه میتواند از RGB پرکیفیت بهتر باشد، چون زمان بارگذاری را کم و تجربه را بهتر میکند.
- - خاکستری رنگ را حذف و فقط روشنایی را نگه میدارد · و بیتمپ تنها دو مقدار دارد: سیاه و سفید. در نمودار منبع، کیفیت از چپ (LAB) به راست (بیتمپ) کم میشود، بههمان ترتیبی که مقدار رنگ کم میشود.
حالت را با بافت انتخاب کنید
منبع پرسش درستی را خودش مطرح میکند: اگر کیفیت LAB و RGB اینقدر بالاتر است، چرا همیشه همانها را بهکار نبریم؟ و جواب کوتاهش «نه» است، چون همهچیز به بافت استفادهٔ کاربر بستگی دارد.
این استدلال ارزش تعمیم دارد، چون همان مبادلهٔ همیشگی طراحی است: کیفیت در برابر هزینه. RGB میلیونها رنگ دارد و فایل سنگین؛ حالت شاخصی رنگ کمتر دارد و صفحهٔ سریعتر. و انتخاب درست، آن است که به سؤال «کاربر این را کجا و با چه چیزی میبیند؟» جواب بدهد — نه آن که در جدول مشخصات عدد بزرگتری دارد.
مسئلهٔ امروز، «فضای رنگ» است نه «حالت رنگ»
این بخش افزودهٔ مترجم است.
فهرست ششحالتی منبع، فهرستی از دنیای تولید چاپی است و برای آن دنیا هنوز درست است. اما اگر محصول شما دیجیتال است، بحث RGB در برابر CMYK تقریباً هیچوقت مسئلهتان نیست. مسئلهٔ واقعی چیزی است که منبع در یک جملهٔ گذرا میگویدش و رهایش میکند: «اجزای رنگی از دستگاه به دستگاه فرق دارند.»
ترجمهٔ امروزیاش این است: RGB یک حالت است، اما فضای رنگ تعیین میکند آن سه عدد چه معنایی دارند. همان کد رنگ در sRGB و در Display P3 دو رنگ متفاوت است — و اختلافشان در رنگهای اشباع بیشترین است: سرخ و سبز و نارنجی سیرِ برند، دقیقاً همانهایی که برایشان جنگیدهاید.
سه کار عملی:
- - رنگ برند را در یک مرجع مستقل از دستگاه ثبت کنید. این همان نقش LAB است که منبع «مرجع رنگ» مینامدش — و برای محصول دیجیتال هم بهکار میآید، نه فقط برای لیوان و بنر.
- - فضای پیشفرض و جانشین را صریح بنویسید. sRGB جانشین است، و اگر نسخهٔ گستردهگستره دارید، هر دو مقدار در سیستم طراحی بنشیند. تصمیمی که نوشته نشود، توسط ابزار گرفته میشود.
- - رنگ تأکید را روی نمایشگر گستردهگستره ببینید. رنگی که در فایل «جسور» است، آنجا میتواند فلورسنت شود؛ و طیفبندی در گرادیانهای هشتبیتی همانجا دیده میشود، نه در ماکت.
خاکستری، حالت نیست؛ آزمون است
این بخش هم افزودهٔ مترجم است، و کمجذابترین بند فهرست منبع را به کاربردیترینش تبدیل میکند.
«خاکستری» در فهرست منبع یک حالت کمکیفیت است که رنگ را دور میریزد. اما همین دورریختن رنگ، دقیقترین آزمون دسترسپذیریای است که میتوانید در سی ثانیه اجرا کنید: رابط را خاکستری کنید. هر اطلاعاتی که ناپدید شود، اطلاعاتی است که فقط با فام حمل میشد.
و آنچه ناپدید میشود همیشه یکسان است: وضعیتهای «موفق/ناموفق» که فقط سبز و سرخاند، نمودارهایی که راهنمایشان فقط رنگ است، فیلد اجباری که فقط با سرخ علامت خورده، و پیوندی که فقط با رنگ از متن جدا شده. همین یک آزمون، بخش بزرگی از مسائل کوررنگی را پیش از اولین بازبینی میگیرد.
و نکتهٔ دوم، که تصمیم حالت رنگ را از یک تصمیم تولیدی به یک تصمیم دسترسپذیری تبدیل میکند: کنتراست در یک فضای رنگ محاسبه میشود. فرمولهای استاندارد کنتراست بر پایهٔ روشنایی نسبی در sRGB نوشته شدهاند. پس اگر رنگ را روی نمایشگر گستردهگستره چشمی انتخاب کنید، ممکن است در فایل قبول شود و روی دستگاه کاربر رد — یا برعکس. عدد را از ابزار بگیرید، نه از چشم؛ و ابزار را روی همان فضایی تنظیم کنید که کاربر در آن میبیند.
و نتیجهٔ سوم: روشنایی، تنها کانالی است که همهجا کار میکند. فام و اشباع در حالتها و فضاها و دستگاهها میلغزند؛ روشنایی نه. پس هر تمایزی که باید منتقل شود، باید تفاوت روشنایی داشته باشد — و رنگ، لایهٔ دوم و تقویتی است، نه حامل اصلی.
در بافت فارسی: چاپ هنوز زنده است و نمایشگر ارزان هم
یک: نیمهٔ چاپیِ این مقاله برای ما بازنشسته نیست. در بازار ما محصول دیجیتال مدام به کاغذ میرسد: صورتحساب، رسید، فرم اداری، قرارداد، تابلوی فیزیکی. پس سیستم طراحیتان به یک دستهٔ توکن چاپی نیاز دارد و مقدار CMYK رنگ برند باید مشخص شده باشد. اگر ننوشته باشیدش، چاپخانه تبدیلش را خودش انجام میدهد و رنگ برند شما در هر سفارش کمی جابهجا میشود.
دو: بیتمپ، بدترین حالت فهرست، شکل روزمرهٔ محصول شماست. چاپگر حرارتی رسید، تککاناله است. لوگویی که فقط در نسخهٔ رنگی طراحی شده، روی رسید به لکه تبدیل میشود؛ و مبلغ و کد پیگیری که با رنگ تمایز داشتند، روی کاغذ حرارتی همسطح میشوند. یک نسخهٔ تکبیتی از لوگو و یک بازبینی رسید، دو کار نیمساعته با اثر زیاد است.
سه: رنگ را روی دستگاه ارزان و با پروفایل «زنده» ببینید. سهم بزرگی از کاربران ما گوشی میانرده و ارزان دارند: بی گسترهٔ وسیع، با پروفایل نمایش پراشباعِ کارخانهای، و اغلب با فیلتر شب روشن. رنگی که در استودیو دقیق تنظیم شده، آنجا سیرتر و گرمتر میشود. بازبینی رنگ روی گرانترین نمایشگر تیم، بازبینی نیست.
چهار: در حالت تاریک، اشباع را کم کنید — خصوصاً پشت متن فارسی. عادت محلی «سیاه مطلق بهاضافهٔ رنگ برند پراشباع» روی نمایشگر OLED هاله میسازد، و این هاله برای خط فارسی بدتر از لاتین است، چون نقطهها و ضخامتهای نازک اول از همه در آن گم میشوند. قاعدهٔ عملی: در حالت تاریک فام را نگه دارید و اشباع را پایین بیاورید، و هرگز رنگ برند سیر را پشت متن اصلی فارسی نگذارید.
جمعبندی
- - حالتهای رنگ تنظیماتی برای نمایش یکدست رنگ روی دستگاهها و موادند: LAB، RGB، CMYK، شاخصی، خاکستری و بیتمپ — با تفاوت در کیفیت و اندازهٔ فایل.
- - دو فرایند تولید رنگ داریم: افزایشی (نور؛ همهچیز = سفید) و کاهشی (ماده؛ همهچیز = خاکستری تیره) — و ناهمخوانی چاپ و صفحه از همینجا میآید.
- - LAB مستقل از دستگاه و بنابراین مرجع رنگ است · RGB برای دیجیتال، با این قید که اجزای رنگی دستگاهها فرق دارند · CMYK زبان چاپ با گسترهٔ محدودتر · و شاخصی میتواند برای وب از پرکیفیتها بهتر باشد.
- - انتخاب درست، جواب سؤال «کاربر این را کجا میبیند؟» است، نه بزرگترین عدد جدول: کیفیت در برابر هزینه.
- - اما مسئلهٔ محصول دیجیتال، فضای رنگ است نه حالت رنگ: یک کد در sRGB و P3 دو رنگ است و اختلافشان در رنگهای اشباع بیشترین. پس مرجع مستقل از دستگاه بنویسید · فضای جانشین را صریح کنید · رنگ تأکید را روی نمایشگر گستردهگستره ببینید.
- - خاکستری حالت نیست، آزمون است: رابط را خاکستری کنید و هر چیزی که ناپدید شد، فقط با فام حمل میشد. و کنتراست در یک فضا محاسبه میشود، پس عدد را از ابزار بگیرید نه از چشم. نتیجه: روشنایی تنها کانالی است که همهجا کار میکند.
- - و در بافت ما: توکن چاپی و مقدار CMYK برند را بنویسید · نسخهٔ تکبیتی لوگو برای رسید حرارتی بسازید · رنگ را روی دستگاه ارزان ببینید · و در حالت تاریک اشباع را کم کنید، خصوصاً پشت متن فارسی.
منبع
این نوشته «بازنویسی آزاد» است از مطلب What are Color Modes? و مقالهٔ What are Color Modes? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف حالتهای رنگ بهعنوان تنظیمات نمایش یکدست رنگ روی دستگاهها و مواد و نامبردن شش حالت رایج با تفاوتشان در کیفیت و اندازهٔ فایل و نقششان در یکدستی برند، نقلقول هانری ماتیس، تفکیک دو فرایند تولید رنگ (افزایشی با آمیختن نور و سفیدشدن در شدت کامل و سیاهبودن نبودِ رنگ با نمونهٔ نمایشگر خاموش، و کاهشی با آمیختن مرکب و رنگ و پوشاندن سطح و نمونهٔ خاکستریقهوهای حاصل از آمیختن همه)، توضیح ناهمخوانی رنگ چاپ و صفحه بر پایهٔ همین دو فرایند و قابلتصحیحبودنش با انتخاب حالت مناسب، ترتیب کاهش کیفیت از LAB تا بیتمپ بهموازات کاهش مقدار رنگ، و تشریح هر حالت (LAB یا CIELab بر پایهٔ ادراک انسانی با یک کانال روشنایی ۰ تا ۱۰۰ و دو کانال محور سبز–سرخ و آبی–زرد از ۱۲۷+ تا ۱۲۸− و مستقلبودنش از دستگاه و کاربردش در محصولات برندی و مرجع رنگ و عکاسی و عیب اندازهٔ فایل و کندشدن بارگذاری؛ RGB با فرایند افزایشی و وجودش فقط در قالب دیجیتال و تفاوت اجزای رنگی میان سیستمها و مدلها و کاربردش در وب و اپ و شبکههای اجتماعی و تبلیغ آنلاین؛ CMYK با فرایند کاهشی و گسترهٔ محدودتر و کمشدن گزینههای رنگی در طراحی دیجیتال با آن؛ شاخصی و بهینهبودنش برای زمان بارگذاری وب؛ و خاکستری و بیتمپ)، و استدلال منبع دربارهٔ اینکه چرا همیشه نباید پرکیفیتترین حالت را بهکار برد و وابستگی انتخاب به بافت استفادهٔ کاربر — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ تصاویر و ویدیوها) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین «کد رنگ یک دستور است، نه یک رنگ» و نسبتدادن بحثهای «رنگ برند درست درنمیآید» به همان؛ تعمیم استدلال منبع دربارهٔ انتخاب حالت به مبادلهٔ کیفیت در برابر هزینه و قاعدهٔ «کاربر این را کجا میبیند»؛ کل بخش فضای رنگ شامل تشخیص اینکه فهرست ششحالتی متعلق به دنیای تولید چاپی است و برای محصول دیجیتال مسئله نیست، بیرونکشیدن جملهٔ گذرای منبع دربارهٔ تفاوت اجزای رنگی دستگاهها و تبدیلش به تفکیک «حالت رنگ» از «فضای رنگ»، تحلیل دورنگبودن یک کد در sRGB و Display P3 و بیشترین اختلاف در رنگهای اشباع، و سه تجویز (ثبت رنگ برند در مرجع مستقل از دستگاه با تعمیم نقش «مرجع رنگ» LAB به محصول دیجیتال، نوشتن صریح فضای پیشفرض و جانشین با گزارهٔ «تصمیمی که نوشته نشود توسط ابزار گرفته میشود»، و دیدن رنگ تأکید روی نمایشگر گستردهگستره با اشاره به طیفبندی گرادیان هشتبیتی)؛ کل بخش «خاکستری آزمون است» شامل بازخوانی کمجذابترین بند فهرست بهعنوان آزمون سیثانیهای دسترسپذیری، فهرست چیزهایی که در خاکستری ناپدید میشوند (وضعیتهای سبز و سرخ، راهنمای نمودار، فیلد اجباری، پیوند بیزیرخط)، گزارهٔ «کنتراست در یک فضای رنگ محاسبه میشود» و پیامدش برای انتخاب چشمی رنگ روی نمایشگر گستردهگستره، و نتیجهٔ «روشنایی تنها کانالی است که همهجا کار میکند» با قاعدهٔ حاملنبودن رنگ؛ و کل بخش بافت فارسی شامل زندهبودن نیمهٔ چاپی برای محصولات محلی و لزوم توکن چاپی و مقدار مشخص CMYK برند با تحلیل جابهجایی رنگ در تبدیل چاپخانه، خواندن بیتمپ بهعنوان شکل روزمرهٔ محصول در چاپگر حرارتی رسید و تجویز نسخهٔ تکبیتی لوگو، لزوم بازبینی رنگ روی دستگاه ارزان با پروفایل پراشباع کارخانهای و فیلتر شب، و قاعدهٔ کمکردن اشباع در حالت تاریک با استدلال هالهٔ OLED و آسیب بیشترش به نقطهها و ضخامتهای نازک خط فارسی.
تصاویر: هر سه نمودار این صفحه طراحی مستقل مترجم است. تصاویر نسخهٔ اصلی شامل تصویرسازیهای CC BY-SA 3.0 از Daniel Skrok و بنیاد و یک تصویر CC BY-SA 4.0 از خودِ بنیاد است؛ چون کل تصاویر این مجموعه بازطراحی شدهاند، هیچکدام اینجا بازتولید نشده و در مطلب اصلی قابل مشاهدهاند.
مشاهدهٔ مقالهٔ اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من