Shade | سایه رنگ (shade)

در نظریهٔ رنگ، shade یعنی تیره‌تر کردن یک فام با افزودن سیاه—یا به‌بیان دیجیتال، کاهش روشنایی در حالی که هویت فام حفظ می‌شود. وقتی می‌گویید آبی را shade کنید، منظورتان آبی تیره‌تر است نه انداختن سایهٔ نرم زیر یک کارت در رابط. این تمایز حیاتی است چون در فارسی واژهٔ «سایه» هم برای عمق UI و هم برای تیرگی رنگ به کار می‌رود و تیم‌ها مدام قاطی می‌کنند. shade ابزار ساخت سلسله‌مراتب، حالت‌های تعامل و پالت برند است؛ shadows ابزار القای elevation و لایه‌بندی بصری. این مدخل فقط دربارهٔ مخلوط تیره‌تر رنگ است.

shade در چرخه و فضاهای رنگ چه معنایی دارد؟

در مدل سنتی نقاشی، tint با افزودن سفید روشن‌تر می‌شود، shade با افزودن سیاه تیره‌تر، و tone با افزودن خاکستری یا کاهش خلوص میانه می‌رود. saturation یا chroma میزان خلوص فام است و با تیره‌کردن یکی نیست؛ می‌توان رنگی خیلی اشباع ولی تیره داشت یا روشن و کم‌اشباع. در HSL تقریبی، shade اغلب با کم کردن L رخ می‌دهد؛ در HSV با کم کردن V. در فضاهای ادراکی مثل OKLCH یا Lab، تیره‌کردن کنترل‌شده‌تر است چون گام‌های روشنایی به چشم نزدیک‌ترند. طراح محصول که فقط هکس را دستی تیره‌تر می‌کند گاهی فام را ناخواسته جابه‌جا می‌کند—آبی به بنفش می‌زند یا قرمز قهوه‌ای می‌شود. ابزار مدرن با حفظ chroma و hue، فقط lightness را جابه‌جا می‌کنند تا shade خانوادهٔ یکپارچه بسازد.

در برندینگ، shadeهای یک رنگ اصلی برای پس‌زمینهٔ تیره، متن روی روشن، و حالت فشردهٔ دکمه استفاده می‌شوند. بدون سیستم shade، هر صفحه یک آبی «تقریباً شبیه» می‌سازد و هویت می‌شکند. توکن‌هایی مثل color.brand.600 یا primary-dark در واقع همان نردبان shade و گاهی tone هستند.

تفاوت با tint و tone و با سایهٔ عمق رابط

tint روشن‌تر کردن با سفید یا افزایش روشنایی است—پس‌زمینهٔ ملایم آلرت اطلاعاتی اغلب tint آبی است. tone معمولاً خاکستری‌کردن یا کاهش شدت است—متن ثانویه اغلب tone خنثی است. shade تیره برای متن روی زمینهٔ روشن، هاور دکمه‌های پررنگ، یا پس‌زمینهٔ عمیق تم تاریک. shadows در مقابل، افست و بلور و شفافیت سیاه یا رنگی برای القای ارتفاع عنصر نسبت به سطح است؛ رنگ سطح را عوض نمی‌کند مگر در تکنیک‌های پیشرفتهٔ tinted shadow. اگر در نقد طراحی بگویید «این دکمه shade کم دارد» منظورتان تیرگی پرکننده است؛ اگر بگویید «elevation shadow کم است» منظورتان عمق لایه‌ای است. واژه‌نامهٔ تیم باید این دو را جدا نگه دارد.

اشتباه رایج دیگر قاطی کردن shade با opacity است. نیمه‌شفاف کردن آبی روی سفید، آبی روشن‌تر ادراک می‌شود اما از نظر ساخت پالت با shade واقعی فرق دارد و روی زمینه‌های مختلف ناپایدار است. برای سیستم طراحی، ترجیح با زوج‌های opaque shade است نه تکیهٔ صرف به شفافیت برای تیرگی.

نردبان پالت: از برند تا حالت خطا و هاور

یک روش عملی ساخت پنج تا نه پله برای هر فام کلیدی است: از خیلی روشن برای پس‌زمینه تا خیلی تیره برای متن. پله‌های میانی برای دکمه، بوردر و آیکون. حالت hover و active معمولاً یک پله shade تیره‌تر از پایهٔ دکمهٔ پر می‌گیرند تا بازخورد بدون تغییر فام senseless باشد. برای خطا، قرمز با shadeهای مختلف: پس‌زمینهٔ tint روشن، متن و آیکون shade تیره برای کنتراست. در نمودار داده، shadeهای یک فام سری‌ها را بدون رنگارنگ شدن بیش از حد متمایز می‌کنند—مفید وقتی کوررنگی یا چاپ سیاه‌وسفید مطرح است.

در فروشگاه آنلاین، رنگ برند برای دکمهٔ خرید، shade تیره‌تر برای pressed، و tint روشن برای بج «تخفیف» روی کارت. اگر pressed فقط با shadow بماند و رنگ ثابت باشد، روی صفحهٔ لمسی که hover ندارد بازخورد ضعیف می‌شود؛ shade تیره‌تر اینجا عملی‌تر است. در داشبورد تحلیلی، سری زمانی با سه shade آبی خواناتر از سه فام کاملاً مختلف است وقتی معنی «همان متریک، شدت متفاوت» باشد.

کنتراست و دسترس‌پذیری وقتی رنگ را تیره می‌کنید

تیره‌کردن خودکار همیشه کنتراست را درست نمی‌کند. متن خاکستری متوسط روی سفید ممکن است با shade تیره‌تر درست شود، اما متن تیره روی پس‌زمینهٔ brand تیره فاجعه است. هر پلهٔ shade باید با جفت متن/زمینه در برابر آستانهٔ WCAG سنجیده شود. در تم تاریک، «shade» مفهومی وارونه در حس روزمره پیدا می‌کند: سطوح بالاتر اغلب کمی روشن‌ترند نه تیره‌تر؛ با این حال در ساخت توکن، هنوز از نردبان lightness حرف می‌زنیم. طراح باید بداند کاربر تم تاریک shade سیاه خالص روی سیاه خالص را تشخیص نمی‌دهد—نیاز به جدایش lightness کافی است.

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

shade در سیستم توکن و تم

طراحی سیستم بالغ رنگ را به‌صورت مقیاس می‌نامد نه یک هکس تنها. نام‌گذاری عددی—يا روشن/تیره صریح—از بحث «کمی تیره‌تر کن» در بازبینی کم می‌کند. همگام‌سازی با حالت‌های معنایی: danger.bg، danger.fg که internally به shadeهای قرمز map می‌شوند. تغییر برند با عوض کردن فام پایه و بازتولید shadeها سریع‌تر از شکار هکس در فایل‌های پراکنده است. در CSS مدرن، relative color یا color-mix با black می‌تواند shade پویا بسازد؛ اما محدودیت مرورگر و پیش‌بینی‌پذیری ادراکی را در نظر بگیرید و برای برند اصلی هنوز نمونه‌های ثابت در توکن بگذارید.

مستند سیستم باید نشان دهد shade برای چه چیزی مجاز است و کجا نباید متن را فقط با تیره‌کردن پس‌زمینه «درمان» کرد. گاهی مشکل فاصله یا وزن فونت است نه رنگ.

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

در تصویرسازی UI و ایلاستریشن داخل محصول، shade حجم و جهت نور را روی خود اشیاء می‌سازد—باز هم معنای رنگ‌سایه‌ای، نه drop shadow لایه. در نقشهٔ حرارتی، مقیاس دنباله‌ای shade یک فام شدت را نشان می‌دهد. در onboarding برند، محدودیت به چند shade از رنگ اصلی حس وحدت می‌دهد و از رنگین‌کمان تصادفی جلوگیری می‌کند. محصول‌هایی که dark mode دیر اضافه می‌کنند اغلب می‌فهمند پالت‌شان فقط برای زمینهٔ روشن ساخته شده و shadeهای میانی برای سطح elevated در تاریکی کم‌اند؛ بازطراحی مقیاس روشنایی بخشی از پروژهٔ تم است نه یک سوئیچ ساده.

در طراحی لوگوی واکنش‌گر یا favicon تک‌رنگ، نسخهٔ shade تیره روی زمینهٔ روشن و برعکس باید از قبل در برندبوک باشد. تیم محصول اگر فقط نسخهٔ رنگی میانی داشته باشد، در نوار وضعیت یا اعلان فشرده کیفیت بصری از دست می‌دهد.

خطاهای مفهومی رایج در تیم‌های محصول

گفتن «سایه اضافه کن» بدون روشن کردن shade یا shadow. ساختن hover فقط با کاهش opacity. کپی کردن پالت Material بدون تطبیق با فام برند—نتیجه سایه‌رنگ‌هایی که با لوگوی شرکت نمی‌خوانند. نادیده گرفتن نمایش روی مانیتور ارزان یا نور خورشید که تفاوت shade ظریف را می‌کشد؛ برای عمل حیاتی، تفاوت lightness باید واضح‌تر از استودیوی طراحی باشد. همچنین قاطی کردن saturation با shade وقتی کسی می‌گوید «رنگ را قوی‌تر کن»—ممکن است منظورش خلوص باشد نه تیرگی.

در نقد طراحی فارسی، پیشنهاد می‌شود صریح بنویسید «یک پله تیره‌تر کن (shade)» یا «elevation را زیاد کن (shadow)». همین عادت آموزشی جلوی بازکاری توسعه را می‌گیرد.

تمرین کوتاه برای طراح و جمع‌بندی

یک فام برند را بگیرید، با ابزار ادراکی پنج پله lightness بسازید، سه جفت متن/زمینهٔ واقعی محصول را کنتراست بگیرید، حالت hover دکمه را یک پله shade تعریف کنید، و نسخهٔ تم تاریک همان مقیاس را جداگانه تنظیم کنید. سپس همان صفحه را بدون هیچ drop shadow ببینید؛ اگر سلسله‌مراتب هنوز با رنگ و shade خواناست، پایهٔ رنگی‌تان قوی است. اگر فقط با سایهٔ عمق فهمیده می‌شود، پالت shade ضعیف است و باید تقویت شود.

سایهٔ رنگ یکی از بنیادی‌ترین اهرم‌های بصری است که بدون افکت لایه‌ای کار می‌کند. در واژه‌نامهٔ مارجین آکادمی آن را کنار tint و saturation بخوانید و از shadows جدا نگه دارید. وقتی تیم دقیق حرف بزند، پالت پایدارتر، دسترس‌پذیری بهتر و بازبینی کوتاه‌تر می‌شود. محصولی که نردبان shade منسجمی دارد، در رشد ویژگی‌های جدید هنوز شبیه خودش می‌ماند—چون هر رنگ تازه اول وارد مقیاس می‌شود بعد وارد صفحه.

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

در پایان، به یاد بسپارید shade میراث کارگاه رنگ و چاپ است که در UI دیجیتال زنده مانده است. صفحه‌نمایش نور می‌تاباند نه رنگدانه، اما چشم هنوز به تفاوت روشنایی حساس است. احترام به این واقعیت ادراکی—بیش از مد روز افکت—پالت‌هایی می‌سازد که هم در اسکرین‌شات بازاریابی زیبایند هم در استفادهٔ روزانه خوانا.