Tint | تن رنگ

تن رنگ یا تینت در نظریهٔ رنگ یعنی مخلوط کردن یک فام با سفید—یا به‌طور کلی روشن‌تر کردن رنگ با نزدیک کردنش به سفید—تا نسخهٔ ملایم‌تر و روشن‌تر همان فام به دست آید. آبی تینت‌شده آسمان کم‌رنگ می‌شود؛ قرمز تینت‌شده صورتی روشن. این حرکت با سایه فرق دارد: سایه معمولاً با سیاه یا تیره کردن همراه است. با اشباع هم یکی نیست: اشباع شدت خلوص فام را کم و زیاد می‌کند، ممکن است روشنایی ثابت بماند. با بافت یا texture فرق دارد؛ بافت سطح بصری و جزئیات لمسیِ دیداری است، نه محور روشن‌سازی رنگ. با تایپ‌فیس و نظام تایپ هم بی‌ربط است. در سیستم طراحی، تینت زبان ساخت سطوح ملایم، پس‌زمینه‌های رنگی کم‌رمق، و پله‌های روشن پالت برند است.

تینت، سایه، تون؛ مثلث کلاسیک

در آموزش سنتی رنگ، tint افزودن سفید، shade افزودن سیاه، و tone افزودن خاکستری است. در UI مدرن ممکن است دقیق با لغزاندن روشنایی در HSL یا با color-mix در CSS پیاده شود، اما مفهوم ذهنی همان است: تینت سمت روشن مقیاس را می‌سازد. اگر طراح بگوید «یک تینت از برند بگذار روی پس‌زمینه»، منظورش معمولاً نسخهٔ خیلی روشن همان فام است تا متن روی آن بخواند و صفحه رنگ بوی برند بدهد بدون جیغ. قاطی کردن تینت با «کم‌رنگ کردن» مبهم خطرناک است؛ گاهی منظور کاهش اشباع است، گاهی افزایش روشنایی. در نقد طراحی واژه را صریح کنید.

مثال: دکمهٔ اصلی brand-600؛ پس‌زمینهٔ اطلاعات brand-50 یا brand-100 به‌عنوان تینت‌های همان فام. هشدار نرم با تینت زرد؛ هشدار قوی با فام اشباع‌تر و تیره‌تر. این نظم، پالت را قابل پیش‌بینی می‌کند.

نقش تینت در سلسله‌مراتب سطح

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

در تم تاریک، «تینت» کلاسیکِ افزودن سفید به معنای روشن کردن روی سیاه پیچیده می‌شود؛ اغلب به جای سفید خالص، مخلوط با سطح روشن‌تر تم یا کاهش شفافیت فام روی زمینهٔ تیره منطقی‌تر است. کپی کور مقادیر تینت تم روشن روی تم تاریک معمولاً کنتراست و حس برند را خراب می‌کند. توکن جدا برای dark لازم است.

سیستم توکن و مقیاس رنگی

طراحی سیستم بالغ برای هر فام برند یک مقیاس می‌سازد: از تینت‌های خیلی روشن تا سایه‌های خیلی تیره. نام‌گذاری عددی—۵۰، ۱۰۰، …، ۹۰۰—به تیم اجازه می‌دهد به‌جای هکس پراکنده بگوید surface-brand-50. تینت‌ها در انتهای روشن مقیاس‌اند. ثبات گام‌ها مهم است: پرش نامنظم بین ۱۰۰ و ۲۰۰، انتخاب در نقد را سلیقه‌ای می‌کند. ابزار ساخت مقیاس می‌تواند از یک رنگ پایه تینت و سایه تولید کند؛ بعد انسان باید کنتراست متن و تمایز ادراکی را روی دستگاه واقعی چک کند، چون ریاضی یکنواخت همیشه ادراک یکنواخت نمی‌دهد.

برای white-label، سقف اشباع و محدودهٔ تینت مجاز در راهنما جلوی مشتری را می‌گیرد که پس‌زمینه را آن‌قدر رنگ کند که متن بمیرد. تینت کنترل‌شده برند را حفظ می‌کند؛ آزادی بی‌حد پالت را متلاشی می‌کند.

دسترس‌پذیری؛ روشن بودن کافی نیست

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

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

تینت در برند، تصویر و بازاریابی

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

گرادیان از فام کامل به تینت حس عمق و نرمی می‌سازد؛ روی متن، کنتراست را در طول مسیر بررسی کنید. پس‌زمینهٔ تینت‌دار شلوغ زیر پاراگراف بلند خوانایی را می‌کشد—بهتر است تینت برای بلوک‌های کوتاه یا حاشیه باشد.

پیاده‌سازی در ابزار و کد

در Figma، ساخت استایل رنگ از پایه با مخلوط سفید، یا استفاده از متغیرها و modes، تینت را قابل‌نگهداری می‌کند. در CSS، رنگ‌های hsl با افزایش lightness، یا color-mix با سفید، خواناتر از دستکاری RGB خام‌اند. شفافیت alpha روی فام گاهی شبیه تینت به نظر می‌رسد اما با زمینه عوض می‌شود؛ برای توکن سطح پایدار، مخلوط واقعی یا مقدار مشخص روشن معمولاً قابل‌پیش‌بینی‌تر از تکیه alone روی opacity است—مگر برای اورلی و هاور موقت.

مستند سیستم باید یک جملهٔ روشن داشته باشد: تینت چیست، سایه چیست، کی از کدام پله برای متن، مرز، و پر کردن استفاده شود. بدون آن، هر تیم محلی «یک کمی روشن‌تر» خودش را می‌سازد و یکدستی می‌میرد.

اشتباه‌های رایج و تمرین چشمی

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

جمع‌بندی: تن رنگ یا تینت نسخهٔ روشن‌شدهٔ فام با نزدیک شدن به سفید است—ابزار ساخت سطح ملایم و پلهٔ روشن پالت، متمایز از سایه، اشباع، بافت و تایپ. در محصول، تینت خوب فضا و هویت نرم می‌سازد بدون دزدیدن توجه از اقدام. وقتی در توکن‌ها تعریف، در تم‌ها جدا، و با کنتراست سنجیده شود، بحث «این پس‌زمینه را کمی رنگی کن» از سلیقه به تصمیم قابل دفاع تبدیل می‌شود. برای واژه‌نامه، تینت را همان محور روشن‌سازی رنگ نگه دارید؛ جای texture یا typeface نیست و جایگزین مدیریت اشباع هم نیست.

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