ساخت پالت رنگ

در نظریه رنگ اپتیکی، روابط هارمونیک بر اساس فاصله‌های زاویه‌ای دقیق در چرخه رنگ استوانه‌ای ۳۶۰ درجه تعیین می‌شوند. موتور ساخت پالت ما رنگ‌ها را به‌صورت مختصات قطبی مدل می‌کند که در آن فام (Hue) زاویه $\theta \in [0^\circ, 360^\circ]$، اشباع (Saturation) فاصله شعاعی از مرکز و روشنایی (Lightness) ارتفاع عمودی را نشان می‌دهد. موتور از هر رنگ بذر پنج طرح بنیادین می‌سازد: ۱. هماهنگی‌های مکمل ($\theta + 180^\circ$): یک فام پایه را با نقطه دقیقاً مقابلش در چرخه رنگ جفت می‌کند. این بیشترین کنتراست رنگی ممکن را ایجاد می‌کند و آن را به استاندارد صنعت برای دکمه‌های فراخوان (CTA) پربازده، نشان‌های خطا و نشانگرهای وضعیت فعال تبدیل می‌کند. ۲. هماهنگی‌های آنالوگ ($\theta \pm 30^\circ$ تا $\theta \pm 45^\circ$): فام‌های همسایه روی چرخه رنگ را انتخاب می‌کند. پالت‌های آنالوگ آرامشی طبیعی و ارگانیک القا می‌کنند (مانند فیروزه‌ای‌های اقیانوسی که در سبزهای زمردی محو می‌شوند) و فضاهای پس‌زمینه و ناوبری راحت و کم‌اصطکاک می‌سازند. ۳. هماهنگی‌های سه‌گانه ($\theta + 120^\circ, \theta + 240^\circ$): مثلثی متساوی‌الاضلاع روی چرخه رنگ می‌سازد. طرح‌های سه‌گانه انرژی زنده و بازیگوشانه‌ای ارائه می‌دهند و در عین حال توازن ساختاری پایدار را حفظ می‌کنند و در نرم‌افزارهای مصرفی و برندینگ سبک زندگی جوانان بسیار محبوب‌اند. ۴. هماهنگی‌های مکمل شکافته ($\theta + 150^\circ, \theta + 210^\circ$): رنگ پایه را با دو رنگ مجاور مکملش ترکیب می‌کند و ظرافت بصری بالایی را بدون لرزش تند و آزاردهنده‌ای که گاهی مکمل‌های خالص ایجاد می‌کنند ارائه می‌دهد. ۵. طیف‌های تُنی تک‌رنگ ($\theta$ ثابت): روشنایی و اشباع را تغییر می‌دهد در حالی که فام ثابت می‌ماند و تجملی سازمانی، فاخر و بی‌ادعا پدید می‌آورد.

فریم‌ورک‌های فرانت‌اند مدرن (مانند Tailwind CSS) رنگ‌ها را در مقیاس‌های عددی استاندارد ۱۰ مرحله‌ای سازمان‌دهی می‌کنند: `50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950`. رنگ اصلی برند معمولاً در مرحله `500` لنگر می‌اندازد. اما ساخت سایه‌های پیرامون آن یک محوشدگی خطی ساده نیست: درون‌یابی خطی در فضای RGB در سایه‌ها قهوه‌ای‌های کدر و گل‌آلود و در نواحی روشن پاستل‌های گچی و بی‌رمق تولید می‌کند.

موتور ما درون‌یابی منحنی تُنی غیرخطی ادراکی را پیاده‌سازی می‌کند. برای ته‌رنگ‌های روشن‌تر (۵۰ تا ۴۰۰)، الگوریتم روشنایی ($L$) را به‌تدریج به سمت ۹۸٪ بالا می‌برد و اشباع ($S$) را به آرامی کاهش می‌دهد تا از درخشش نئونی جلوگیری شود. برای سایه‌های تیره‌تر (۶۰۰ تا ۹۵۰)، روشنایی به سمت ۸٪ فشرده می‌شود و چگالی رنگی تنظیم می‌شود تا از بریدگی سیاه گل‌آلود جلوگیری شود. نتیجه طیفی درخشان و منسجم است که هر مرحله آن از نظر بصری مرتبط به نظر می‌رسد و به توسعه‌دهندگان اجازه می‌دهد پس‌زمینه‌ها، حاشیه‌های ظریف، حالت‌های hover و حالت‌های فشرده فعال را با سازگاری ریاضی سبک‌دهی کنند.

دسترس‌پذیری دیجیتال طبق استانداردهای انطباق بین‌المللی (ADA Title III، قانون دسترس‌پذیری اروپا، Section 508) یک الزام قانونی است. رهنمودهای دسترس‌پذیری محتوای وب (WCAG 2.1) نسبت‌های کنتراست مشخصی میان متن پیش‌زمینه و رنگ‌های پس‌زمینه زیرین الزام می‌کنند: - سطح AA (متن عادی): حداقل نسبت کنتراست $4.5:1$. - سطح AA (متن بزرگ $\ge 18\text{pt}$): حداقل نسبت کنتراست $3.0:1$. - سطح AAA (کنتراست تقویت‌شده): حداقل نسبت کنتراست $7.0:1$. مولد ما روشنایی نسبی هر نمونه تولیدشده را با ضرایب sRGB خطی‌شده ارزیابی می‌کند: $L = 0.2126R_{\text{lin}} + 0.7152G_{\text{lin}} + 0.0722B_{\text{lin}}$. نسبت کنتراست $CR$ در برابر پس‌زمینه‌های سفید استاندارد (#FFFFFF) و لوحی تیره (#0F172A) محاسبه می‌شود: $$CR = \frac{L_{\text{lighter}} + 0.05}{L_{\text{darker}} + 0.05}$$ نشان‌های بصری بی‌درنگ دقیقاً به مهندسان فرانت‌اند نشان می‌دهند کدام سایه‌های مقیاس از نظر قانونی می‌توانند میزبان متن سفید یا سیاه باشند و دوباره‌کاری دسترس‌پذیری در ممیزی‌های کد را حذف می‌کنند.

یک اشتباه رایج میان طراحان تازه‌کار، توزیع برابر رنگ‌ها در سراسر رابط است که به آشفتگی بصری می‌انجامد. مدیران هنری حرفه‌ای از قاعده همیشگی ۶۰-۳۰-۱۰ پیروی می‌کنند: ۱. ۶۰٪ پایه غالب: پس‌زمینه خنثای بوم (معمولاً مرحله ۵۰ یا ۱۰۰ در حالت روشن، یا مرحله ۹۰۰/۹۵۰ در حالت تیره) که فضای بصری آرامی برقرار می‌کند. ۲. ۳۰٪ ثانویه ساختاری: کارت‌ها، نوارهای کناری، حاشیه‌ها، دکمه‌های ناوبری فعال و تایپوگرافی ثانویه (معمولاً مراحل ۲۰۰، ۳۰۰ و ۷۰۰) که تعریف ساختاری فراهم می‌کنند. ۳. ۱۰٪ تأکید زنده: رنگ مکمل یا سه‌گانه پرکنتراست (مرحله ۵۰۰ یا ۶۰۰) که منحصراً برای دکمه‌های اقدام اصلی، نشان‌های اعلان و پیوندهای حیاتی تبدیل کنار گذاشته می‌شود. وقتی کاربر به صفحه نگاه می‌کند، تأکید ۱۰٪ فوراً نگاهش را به خود جلب می‌کند.

برای تبدیل الهام خام به دارایی‌های وب آماده تولید، «ساخت پالت رنگ» را با ابزارهای مجاور در مجموعه 2run.tools ترکیب کنید: ۱. استخراج با «استخراج رنگ‌های غالب» یا «انتخابگر رنگ قطره‌چکان»: فام اصلی قهرمان را از عکس منبع یا دارایی مودبورد خود نمونه‌برداری کنید. ۲. تولید سیستم هارمونیک با «ساخت پالت رنگ»: طرح‌های مکمل، آنالوگ یا سه‌گانه را بسازید و طیف تُنی کامل ۱۰ مرحله‌ای را تولید کنید. ۳. راستی‌آزمایی دسترس‌پذیری: نشان‌های کنتراست WCAG را بررسی کنید تا ترکیب‌های رنگی دسترس‌پذیر برای دکمه و تایپوگرافی انتخاب شوند. ۴. سبک‌دهی دارایی‌های گرافیکی: کدهای تأکیدی برند تازه‌ساخته‌شده را درون «افزودن حاشیه» یا «پوشش رنگی» به کار ببرید تا گرافیک‌های تبلیغاتی یکپارچه شوند. ۵. تحویل توکن به توسعه‌دهنده: روی خروجی کلیک کنید تا ویژگی‌های سفارشی CSS آماده تولید (`:root { --color-primary-500: #...; }`) یا اشیای پیکربندی Tailwind را مستقیماً در مخزن کد خود کپی کنید.